アイコン入替トグル（ライト/ダーク切替）
太陽と月のアイコンが入れ替わる、ライト・ダーク切り替え風のトグルスイッチです。中身は素のチェックボックスで、 input を隠して label 全体を押せるようにし、 :checked の状態に応じてつまみの位置と背景色を transition で動かします。
解説
太陽と月のアイコンが入れ替わる、ライト・ダーク切り替え風のトグルスイッチです。中身は素のチェックボックスで、input を隠して label 全体を押せるようにし、:checked の状態に応じてつまみの位置と背景色を transition で動かします。オフでは太陽のインライン SVG、オンでは ::after で月の SVG に差し替わり、状態が一目で伝わります。JavaScript なしで状態を保持できるのがチェックボックスを土台にする利点です。
使う場面
- サイトのテーマ切り替えスイッチ
- 通知やマナーモードなど二択の設定
- 機能のオン・オフを直感的に見せたい箇所
つまみの移動量は left の値、オン時の色は :checked 側の背景で調整します。実際にテーマを切り替えるには、チェック状態を読んで html へクラスを付ける処理を足します。見た目だけでなく操作性も大切なので、label に説明を関連付けてキーボードでも切り替えられる状態を保ってください。
使用例・適したシーン
- 設定 UI
- 通知 ON/OFF
- ダークモード切替
よくある質問
JavaScript なしで状態を覚えられますか。
見た目の切り替えはチェックボックスの checked 状態だけで保持されます。ただし実際のページテーマを変えるには、状態を読んで反映する処理を別途足す必要があります。
アイコンを別の絵柄にできますか。
つまみ内とチェック時の SVG を差し替えれば変更できます。線画 SVG をインラインで入れているので、好みのアイコンに置き換え可能です。