ダークモードトグル（永続化つき）
ボタンひとつで明暗テーマを切り替え、選択を 次回訪問時まで保持する ダークモードトグルです。色は :root の CSS 変数（ --bg / --text / --accent ）で管理し、 [data-theme="dark"] が付いたときに値を差し替える仕組みです。
解説
ボタンひとつで明暗テーマを切り替え、選択を次回訪問時まで保持するダークモードトグルです。色は :root の CSS 変数（--bg / --text / --accent）で管理し、[data-theme="dark"] が付いたときに値を差し替える仕組みです。JavaScript は data-theme を切り替えるだけで、状態を localStorage に保存し、再訪時に読み戻します。localStorage アクセスは try/catch で囲み、ブロックされる環境でもエラーで止まらないよう配慮しています。
使う場面
- 長文を読ませる記事サイトやドキュメント
- 夜間利用が多いダッシュボードや管理画面
- ブランドの世界観を明暗で出し分けたいサービスサイト
テーマの色を増減したいときは CSS 変数を追加し、両テーマで同じ変数名に値を割り当てます。背景と文字色には transition が効いており、切替時にふわっと色が変わります。トグルボタンには aria-label が付いていますが、現在のテーマを aria-pressed で伝えるとスクリーンリーダーにも状態が明確になり、よりアクセシブルになります。
使用例・適したシーン
- ブログ・記事サイト
- ダッシュボード
- コードドキュメント
よくある質問
テーマの色はどこを変えればいいですか？
:root に定義した --bg・--text・--accent の値を変えると明るいテーマが、[data-theme="dark"] の同名変数を変えると暗いテーマが調整できます。HTML や JS を触らずに配色を変更できます。
なぜ localStorage を try/catch で囲むのですか？
プライベートブラウズや一部の埋め込み環境では localStorage の読み書きが例外になることがあります。try/catch で囲むことで保存に失敗してもスクリプト全体が止まらず、テーマ切替自体は動き続けます。