はいどうもーUIデザイナーのうっくんです。

以前CSSとjQueryを使って簡単にウェブサイトをダークモードに対応する方法をご紹介しました。

もうすぐ公開されるであろうiOS13ではOSレベルでダークモードがサポートされることもあり、せっかくなのでOSの設定に応じてウェブサイトもダークやライトの変更ができればより良いかと思います。

実はCSSのメディアクエリという書き方を使ってOSのダークモードに応じたCSSの条件分岐が可能なようです。

書き方はこちら。

@media (prefers-color-scheme: dark) {
        body {
       background-color: #020212;
   }
}

めっちゃ簡単。

開発環境で試して、すぐに動作が確認できました。Safariはほぼ大丈夫で、Chromeは最近のリリースで対応したそうです。それ以外のブラウザーはよくわからんけど、あんまり期待しないほうが良さげ。

前回紹介したやり方では

//CSS
.Dark-Mode p {
    color: #fff;
}

とやっていました。この書き方のメリットはDark-ModeのクラスをjQueryでtoggleしてあげるだけでダークとライトの切り替えを行えることです。

Toggleする方法はこちら。

//JavaScript
    $('#DarkModeSwitcher > button').click(function () {
       $('body').toggleClass('Dark-Mode');
   });

僕のポートフォリオサイトではボタンを用意してユーザーが任意に切り替えられるようにしました。気に入っていますが、デメリットとしてはOSのダークモードを反映できないということがあります。

今回、ポートフォリオでもOSのダークモードを基に切り替えるコードにしようかと思ったのですが、ユーザー任意で切り替えられる機能を残そうとすると、どうしてもダークモード用のCSSを複数箇所に書かないといけない作り方になってしまうので、メンテナンス性を考えてとりあえず保留しています。

ダークモード対応の端末（iOS13以降、Mac OS Mojave以降、Android 9以降？Windows？）がもう少し普及したら、ユーザーの任意で切り替える機能は廃止してOSの設定のみによって切り替えるようにしてみようかなと考えたりしているところ。