【CSS】今さらダークモードの実装を試してみる
はじめに
今回の記事では、CSS でダークモードを実装する方法を解説します。2 通りあるのですが、いずれもかなり直感的で簡単です。
prefers-color-scheme
一つ目は prefers-color-scheme というメディア特性を使用する方法です。
通常のスタイルとは別に、ダークモード用のスタイルを@media (prefers-color-scheme: dark){}内に記述する形式です。メディアクエリと同じ感覚で書けるので、ハードルはかなり低いと思います。
/* prefers-color-scheme */
/* 通常のスタイル */
body {
background-color: #fff;
}
.text {
color: #333;
}
/* ここから dark-mode のスタイル */
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
}
.text {
color: #ccc;
}
}
light-dark
二つ目は light-dark という CSS 関数を使用する方法です。:rootに対してcolor-schemeを定義しておきます。あとはlight-dark()に第一引数にライトモード(=通常)用の値、第二引数にダークモード用の値を渡すことで、両方のモードに一括で対応することができます。
/* light-dark() */
:root {
color-scheme: light dark;
}
body {
background-color: light-dark(#fff, #333);
}
.text {
color: light-dark(#333, #ccc);
}
2025/3/12 現在、Can I Use では対応率は 86.9%となっています。モダンブラウザは対応が進んでいますので、案件での使用も充分可能ではないかと思います。
ダークモードの検証
検証ツールからダークモードに切り替える方法を紹介します。
検証ツールから、command+shift+P(Windows は Ctrl+Shift+P) でコマンドメニューを開いてShow Renderingと入力し、Rendering セクションを開きます。
Rendering セクションの中にEmulate CSS media feature prefers-color-schemeという項目があるので、そこのプルダウンから light dark を選べば、確認したいモードのスタイルを自由に確認することができます。
これで、スタイルが正しく適用されているかどうか調べることができます。
まとめ
今回の記事では、CSS でダークモードを実装する方法を解説しました。 prefers-color-schemeとlight-darkのいずれも、非常にお手軽かつ直感的に使えるもので驚きました。「ダークモードの実装って大変そう」というイメージを勝手に抱いていたのですが、この感じならサクッと導入できそうです。カスタムプロパティ等も併用すれば、かなりシステマティックに実装できると思います。
Discussion