BETA

Google Chromeの機能でWebページの表示をライトモード、ダークモードに切り替えてみた

投稿日:2019-08-04
最終更新:2019-08-05

Google ChromeのWebページの表示をライトモード、ダークモードに切り替える

Chrome76でWebページをOSのアプリモードに合わせてダークモード、ライトモードに切り替えることができるようになったので試してみました。
まずはメディアクエリでlightとdarkにライトモード、ダークモード用のCSSを記述します。
CSS

@media (prefers-color-scheme: light) {  
  body {  
    color: #FFFFFF;  
    background-color: green;  
  }  
}  


@media (prefers-color-scheme: dark)  
  body {  
    color: #FFFFFF;  
    background-color: black;  
  }  
}  

次にWindows10のアプリモードを切り替えてみます。

アプリモードの「白」でブラウザの背景が緑に「黒」で背景が黒になっていることがわかります。
これは@mediaに記述したprefers-color-scheme: lightとprefers-color-scheme: dark内のプロパティに反応して色が変わっています。

今まではダークモードの実装などはjsなどを利用してユーザーにWebサイト上からダークモード、ライトモードを選択してもらうような方法をとっていましたが、Chromeに限っていえばCSSにそれぞれのモード用のプロパティを記述していれば、OSのアプリモードに反応してライトモード、ダークモードを切り替えることができるようになったと言えます。

こういった機能がほかのブラウザにも実装されることを期待したいです。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

ボヘミアン⚡の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう