ダークモード切り替えトグル
これはチェックボックスを使ったダークモード切り替えトグルです。見た目はスイッチですが中身は input type=checkbox で、ラベル内に隠したチェックボックスの状態を change イベントで拾い、外側のコンテナへ dm-demo--dark クラスを付け外しします。
解説
これはチェックボックスを使ったダークモード切り替えトグルです。見た目はスイッチですが中身は input type=checkbox で、ラベル内に隠したチェックボックスの状態を change イベントで拾い、外側のコンテナへ dm-demo--dark クラスを付け外しします。色そのものは --bg や --text といった CSS 変数で持たせてあるため、クラス 1 枚の切り替えでカード・文字・トラックの配色がまとめて入れ替わります。transition を効かせているので、切り替えは急に飛ばず数百ミリ秒かけて滑らかに変化します。
使う場面
- 記事や管理画面で夜間の閲覧負担を下げたいとき
- ブランドの明暗 2 テーマを 1 つの実装で出し分けたいとき
- 設定パネルの中に表示テーマの切り替え項目を置きたいとき
配色は .dm-demo と .dm-demo--dark の変数値を書き換えるだけで調整できます。実運用では選んだ状態を localStorage に保存し、次回読み込み時に復元すると親切です。アクセシビリティ面では aria-label を付けて操作目的を読み上げに伝えており、本物のチェックボックスを土台にしているのでキーボード操作にもそのまま対応します。
使用例・適したシーン
- ブログ・記事サイト
- ダッシュボード
- コードドキュメント
よくある質問
選んだテーマをページ再読み込み後も保持できますか？
このサンプル単体では保持しません。change イベント内でチェック状態を localStorage に保存し、読み込み時に復元してチェックを反映させれば永続化できます。
なぜ色を直接書かず CSS 変数で持たせているのですか？
変数にしておくと、ダーク用クラスを 1 つ付けるだけで配色をまとめて差し替えられるためです。要素ごとに色指定を書き換える手間がなくなります。