エンジニアのひよこ_level10

【毎日更新!】新卒4年目エンジニアブログです!

【CSS】ダークモードに合わせてデザインを変える【916日目】

ダークモードに対応したい

最近はスマホのダークモードを使ってる人が増えてきました。

ダークモードで画面が暗くなっていても、Webページを見たら白背景で結局意味がない……

ってことで、ダークモードの人用のデザインを用意したい

prefers-color-scheme: dark

@media (prefers-color-scheme: light) {
}
@media (prefers-color-scheme: dark) {
}

これで使い分けれる。
ブラウザによりますが、スマホでもPCでも使い分けが出来ます。

これで色をモードに合わせて変えましょう。

参考

developer.mozilla.org