ダークモード切り替え実装時に気をつけたこと

Olive にダークモード・ライトモード切り替えボタンを実装したときに気をつけたことをまとめてみました。

ダークモード切り替えボタンの必要性について

ダークモードの対応といえば、メディアクエリの prefers-color-scheme がよく知られています。これを使うことで、デバイス（OS）の設定に従ってダークモード・ライトモードで表示できます。

また、 dark-light() 関数の登場により、CSSのみでもとても簡単にダークモードができます。

では、さらにそこに切り替えボタンまで作成する必要があるのでしょうか。

ユーザーに選択肢を与える

結論から言うと、必要性はあります。

  • 普段はダークモードでも、明るいところではライトモードにしたい
  • 普段はライトモードだが、寝室ではダークモードを使用する
  • どちらかのデザインのほうが好き

このように、デバイスの設定とニーズが常に一致するわけではありません。いちいち設定を切り替えるのも面倒です。サイト内に切り替えボタンがあることで、ユーザーに好きなほうを選んでもらうことができるようになるのです。

切り替えボタンのマークアップについて

Olive での切り替えボタンのマークアップは、以下のようにしています。
（スタイル設定用のクラスはいったん除いています）

<div aria-live="polite">
  <button id="js-toggleTheme" type="button">テーマを切り替える</button>
</div>

切り替えボタンには <button> タグを使用しました。

デバイス設定の読み込みと、切り替え用のJavaScript

最初に表示するテーマの設定は、デバイスの設定に従います。その後、ユーザーがボタンにより設定を切り替えたらそれを上書きする仕様にしました。

まず、head内でCSSファイルを読み込む前に最小限のJavaScriptでユーザー設定を読み込みます。