WebサイトにもダークモードをするCSSがあるらしい

先日Chromebookを購入したのでレビューをまとめてるんですけど、項目増えすぎててなかなか終わらないです。

そんな関係でchromeの更新周りの記事を流し読みしてたら(遅いかもだけど)興味深い情報が。

最近MacOS等で画面を黒基調にするダークモードが流行っているらしく、WebサイトもCSS を用いて対応を進めていくことになりそうです。

prefers-color-scheme – CSS: カスケーディングスタイルシート | MDN

現時点ではまだ対応はほとんど進んでいないようです。Safari、Firefoxくらい。と思ってたらつい昨日(4/25)の更新で対応していた!まだすべてのユーザーには公開していないらしいが…

Google、「Chrome 74」の安定版公開 Windowsでもダークモードに対応へ

CSSの例

.theme{
  background: #fff;
  color: #000;
}
@media (prefers-color-scheme: dark) {
  .theme{
    background: #000;
    color: #fff;
  }
}

最近はiPhoneXシリーズをはじめとした有機 ELディスプレイの端末が増えています。有機ELは黒色を表示するのに、

  • 画面の焼き付きを抑えられる
  • バッテリー消費を抑えられる

といった特徴があるので、これから需要は増えそうですね。