ダークモード切替

初段 / 目安 15分

陽葵さんがスマホを片手に走ってきました。「前に仕込んでもらった夜モード、あれすごくよかったの。でも今は勝手に切り替わらないでしょ? ボタンで切り替えられるようにして！」

実は下ごしらえはもう済んでいます。CSS には body.dark のときだけ色が入れ替わる仕掛けが書いてあり、色は --bg --fg --accent の3つの変数にまとめてあります。つまり body に dark というクラスが1つ付くかどうかで、ページ全体の見た目が丸ごと変わります。

やることは、ボタンが押されるたびに body の dark を付けたり外したりすることだけです。あわせて、ボタンの文字も切り替えてください。夜モードでないときは「夜モードにする」、夜モードのときは「昼モードにする」です。押してもボタンの文言が変わらないと、いま何モードなのかが利用者に伝わりません。

完成条件

• #theme-btn を押すと body に dark クラスが付く
• もう一度押すと dark クラスが外れる
• 夜モードのときはボタンの文言に「昼モード」を含める
• 昼モードに戻したらボタンの文言は「夜モード」を含める

進め方

「付いていたら外す、付いていなかったら付ける」を if で書くこともできますが、classList にはそれ専用の toggle があります。1行で済むほうを選んでください。

文言の切り替えには、いま夜モードかどうかの判定が要ります。classList.toggle は付けたあとの状態を true か false で返してくれるので、その戻り値をそのまま使うのが素直です。三項演算子を使うと1行に収まります。

body を取るのは document.body です。ここだけは getElementById が要りません。

ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

1. #theme-btn のクリックで body の dark クラスをトグルする
2. もう一度押すと dark クラスが外れる
3. 夜モードのときはボタンの文言を「昼モードにする」に変える
4. 昼モードに戻ったらボタンの文言を「夜モードにする」に戻す