CSS ダークモードに対応する

こんにちは。ましじめの田村です。

OSのカラーテーマを設定出来るようになり、アプリなど「ダークモード」が増えてきました。
今後Webサイトも「ダークモード」に対応したいという要望が出てきそうです。

Webサイトはメディアクエリを使ってCSSを設定すると選択したカラーテーマに合わせてスタイルを変更することが可能です。

対応ブラウザはIE、Edgeは未対応ですが
Can I use... を見るところ次期Chromium版のEdgeからは「ダークモード」に対応できてるようです。

最新ブラウザをターゲットとするのであれば使用出来そうです。
また、ダークモードに対応したい場合は次の記述で実現可能です。

@media (prefers-color-scheme:light) {
/* ライトモード用のスタイル */
}
@media (prefers-color-scheme:dark) {
/* ダークモード用のスタイル */
}

CSSでダークモードに対応する場合参考にしてみてください。
以上「CSS ダークモードに対応する」でした。

---