Edited at

Android 10も出たしCSSでダークモードに対応する方法を調べてみた

ダークモードに対応したAndroid 10がリリースされました。

これでスマホ2大巨頭であるiOS、Androidがダークモードに対応したことになります。


@media (prefers-color-scheme)でかんたんに対応できる!

以下ようにすることでダークテーマのときのスタイルを設定することができます。

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

/* スタイル */
...
}


See the Pen
dark mode
by tkt989 (@tkt989)
on CodePen.

以前でもアプリやWebサービスが独自にダークモードに対応していましたが、

「読みやすい」「オシャレ」などの理由で、使っている人が多かったのではないでしょうか。

しかし、iPhoneXなど有機ELを搭載したデバイスが増えてきたことにより、バッテリー持ちが良くなるという実用的なメリットも出てきました。

バッテリー持ちについては、Googleも認めています!

参考: ダークモードはバッテリーの持ちにヨシ!とGoogleがキッパリ。ただし有機ELに限る | ギズモード・ジャパン