ダークモードを追加してみた

サイトにダークモード切り替えボタンを置こう – Qiita

こちらのコードを流用して設置した。素晴らしいコード、感謝します。

ダークモードとは？

文字通り背景色に黒を、文字色に白を基調とした配色のことである。多くのスマートフォンやタブレット、一部のWebサイト（TwitterとかYoutubeなど）でユーザーが選べるようになっている。

目が疲れにくい、ディスプレイの消費電力が抑えられるなどのメリットがあるそう。ソースは各自で検索して頂きたい（適当）。

本サイトは特にそう言った事は考えておらず、純粋にターミナルを意識したデザインを目指していたため、ダークモードになっていた。

選択肢

デザインとして選択したものの、ブログは人に見てもらうもの。ダークモードだと読みにくいと思われる方もいると思い、切り替えられるようにしようと思った。

色々調べていくと選択肢があることが判明。

• JavaScriptで書く
• Darkmode.Js等のJavaScriptライブラリを使用する
• WordPressのプラグインを入れる

当初は、プラグインのBlackout: Dark Mode Widgetで手早く済ませようと思ったのだが、細かい調節出来ずに断念。別のプラグインであるWP Dark Modeはかなり使い勝手が良さそうだったが、PROライセンスを購入しないとやはり微調整は出来ないようだ、残念。

そもそもただでさえプラグインへの依存度が結構高め。更新されていないプラグインが出てくると、動作不良はともかくセキュリティにおいても不安である。

いろいろ何か参考になるコードはないか探していたら、一番最初のページへとたどり着いたわけだ。

感想

// デバイスがライトモードかどうかチェック
const isLight = window.matchMedia('(prefers-color-scheme: light)').matches;

prefers-color-schemeで、ユーザーがシステムに対してライトモードorダークモードのどちらかを設定しているか取得出来るようだ。

prefers-color-scheme – CSS: カスケーディングスタイルシート | MDN

試しにiPhoneで切り替えて、シークレットモードでアクセスしたら、ちゃんと切り替わった。

まだCSS等の細かい調整が残っているものの、理想的で素晴らしいの一言。

@whike_chanさんに改めて感謝申し上げたい。