CSS のみダークモード切替

解説

JavaScript を一切使わずに、ページ全体をダークモードへ切り替えるトグルです。鍵になるのは比較的新しい CSS の :has() セレクタで、body:has(.dc-toggle input:checked) という書き方により「チェックボックスがオンになっている body」だけに暗い配色を当てられます。トグルのつまみは :checked と隣接セレクタで右へ移動し、背景や文字色は transition でなめらかに切り替わるため、押した瞬間の気持ちよさも保たれます。

使う場面

設定パネルのダークモード切替、ブログの読書モード、ダッシュボードの昼夜切替など、状態を保存しなくても見た目だけ切り替えたい場面に手軽です。依存スクリプトがないので、軽量なサイトやワンページ構成と相性が良いです。

• 配色：明暗それぞれの background と color を差し替えるだけでテーマを変えられます。
• 対応：:has() は新しめのブラウザで動きます。古い環境も支えるなら JavaScript でクラスを付ける従来手法が無難です。
• 注意：CSS のみのため、選んだ状態はページを離れると保存されません。記憶させたい場合は別途スクリプトが要ります。

使用例・適したシーン

• ブログ・記事サイト
• ダッシュボード
• コードドキュメント