ダークテーマ切替対応

師範 / 目安 35分

閉店後の店内で、陽葵さんが照明を落としながら言いました。「夜のバー営業も始めるの。サイトも夜っぽい配色に切り替えられたらいいなって。切り替えるボタンは知り合いに書いてもらったから、色の仕込みだけお願い!」

ここまで色は #f7f3ec のように 値 で書いてきました。それだと配色を変えるとき、CSS の中に散らばった同じ色をすべて探して書き換えることになります。10か所あれば10回、1つ見落とせばそこだけ昼のまま残ります。

解き方は、色を値ではなく 意味 で持つことです。CSS には変数 (カスタムプロパティ) があります。

:root はページ全体を指すセレクタで、ここに --bg のように2本のハイフンで始まる名前を定義すると、どこからでも var(--bg) で呼び出せます。以降、CSS の中に生の色コードはほとんど残りません。「背景の色」「文字の色」「差し色」という 役割 だけが残ります。

夜の配色はこう上書きします。

変数は近いところの定義が勝つので、body に dark クラスが付いた瞬間、var(--bg) を使っているすべての場所が一斉に夜の色に変わります。書き換えるのは変数の定義3行だけで、var() を書いた側は1文字も触りません。これが設計です。

完成条件

• :root に --bg、--text、--accent の3つの変数を定義する。昼の値は starter でいま使っている色をそのまま引っ越して、--bg は #f7f3ec、--text は #3b3129、--accent は #b3612f とする
• 背景色・文字色・差し色を、生の色コードではなく var() で指定する
• .dark を書き、その中で --bg と --text を夜の色に上書きする。夜の色は自分で選んでよい

進め方

白紙から書いてください。手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

切り替えの動きは、body タグの class に dark を手で書き足せば確かめられます。書き足したときに何色変わるかを数えてください。変数を使えていないところだけが昼のまま取り残されます。

1. :root に --bg (#f7f3ec)、--text (#3b3129)、--accent (#b3612f) の3つの変数を定義する
2. body の背景色と文字色を var(--bg) と var(--text) で指定する
3. 見出しやボタンの差し色を var(--accent) で指定する
4. .dark を書き、その中で --bg と --text を夜の色に上書きする