皆さん、こんにちは。今回は、最近実装に苦労したコードや、その解決策についてお話したいと思います。

今回はダークモード切り替え機能の対応について書きたいと思います。最近では多くのWebサイトやアプリでダークモードが導入されており、利用者が見やすい画面表示を選べる機能として一般的になっています。特に夜間や長時間利用する場面では、画面の明るさを抑えられるため需要も高く、使いやすさの向上に繋がる機能だと感じています。そのため、画面テーマを切り替えられる仕組みを取り入れる際には、見た目だけでなく操作性も意識して対応を進めました。

最初に取り組んだのは、ボタン操作で通常モードとダークモードを切り替える基本的な処理です。JavaScriptでボタン押下時にclassを付け替え、CSS側で背景色や文字色を変更する形で進めました。ここまでは比較的スムーズに実装できましたが、実際に画面全体を確認すると想定していたよりも違和感がありました。背景色と文字色だけは切り替わっていても、ボタンや入力フォーム、リンクカラーなど細かなパーツが通常モードの色のまま残ってしまい、全体として統一感がなくなっていたためです。

そこで、各パーツごとに色設定を見直す対応を行いました。ボタンは背景色だけでなく文字色やマウスを乗せた際の色変化も調整し、入力フォームについては暗い背景でも文字が見やすくなるようにコントラストを意識して修正しました。リンクについても通常モードで使っていた色が暗い背景では強く見えすぎる場面があったため、ダークモード専用の配色を用意しました。

この対応によって、画面全体に統一感が出て、見やすさも改善できました。次に課題となったのは、ページを再読み込みすると選択したモードが元に戻ってしまう点でした。ユーザーがダークモードを選択しても、次回アクセス時に通常モードへ戻ってしまうと毎回切り替えが必要になり、利便性が下がってしまいます。そこで、localStorageを利用して選択状態を保存する仕組みを追加しました。モード変更時に現在の設定を保存し、ページ読み込み時にその情報を取得して前回の状態を反映するようにしました。これにより、一度設定すれば次回以降も同じ表示を維持できるようになり、使いやすさが大きく向上しました。

さらに細かな部分では、ページ読み込み直後に一瞬だけ通常モードが表示され、その後ダークモードへ切り替わる現象にも苦労しました。これは保存された設定を読み込む前に画面が先に表示されてしまうことで発生していました。対策として、画面描画前に保存されたテーマ設定を確認し、先に適用してから表示する流れへと変更しました。この修正によって切り替え時のちらつきがなくなり、自然な表示になりました。

この記事が気に入ったら
いいね！しよう