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

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

これでスマホ２大巨頭である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に限る | ギズモード・ジャパン