ダークモードトグル ↔️

カバー画像 for Dark Mode Toggle ↔️

シンプルなダークモードがどうユーザーのインタラクション体験を向上させるか、ずっと興味深く思ってました。クリエイティブなコーディングの旅の始まりとして、よく使われるダークモードトグルをデザインしました。

さあ、作り始めましょう 🏗️

トグルがどう動くか、見てみましょう。

checkbox タイプの input タグを使って、モードの切り替えができます。

label を使ってトグルのビューを作るんです。label の中には、☀️ と 🌑 を表すために Font Awesome のアイコンを使っています。トグルのアニメーションと現在の状態を、トグル内のボールを使って表現できます。

HTMLコードの中では、input と label がどうリンクされていて、ラベルがクリックされるたびにチェックとアンチェックの効果が生まれるか、重要なポイントです。

まず、アイコンを表現するために Font Awesome をインポートする必要があります。これは、codepenの設定内のCSSセクションに行くことで実現できます。（「font awesome」と検索して、外部スタイルシートに追加します。）

bodyの高さと幅はそれぞれ100vhと100vwに設定されています。これは基本的に、画面の寸法が8001000であれば、bodyの寸法は8001000（画面寸法の100％）になります。

100%と100vh（または100vw）を使うことが同じではないことに注意が必要です。下記に一例を挙げます。

p は高さ100%に設定されています。しかし、200pxの高さの div 内に置かれているため、pの高さは200pxになります。p がbody全体の高さになるように、100%の代わりに100vhを使い、p の高さが div の高さに影響されないようにします。

なぜ box-sizing を使うのか？
このプロパティにより、パディングとボーダーを要素の総幅と高さに含めることができます。'border-box' は、あなたが指定した要素の寸法値に任意のボーダーとパディングを含めるようブラウザに指示します。

チェックボックスの値は、チェックされた擬似クラスを使って取得できます。隣接セレクタ('+')を使うので、最初にラベルをターゲットにして、その後ボールをターゲットにします。

チェックボックスをターゲットにして、イベントリスナーを追加します。チェックボックスの入力を使用しているので、入力がチェックされたり、チェックが解除されたりする（モードが切り替わる）毎に、change関数（'dark'クラスをbodyに追加/除去する）がトリガーされます。

ボーヤ！
機能するダークモードトグルができました。調整して再利用してください！👏

（P.S ダークモード >>> ライトモード）

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/mihir_chhatre/dark-mode-toggle--4m0b