WebDesigner's Memorandumウェブデザイナーの備忘録

Safari 12.1から外観モード(ライト/ダーク)の判定をCSSで行えるように!

Safari 12.1から、Macの外観モードの状態に応じてメディアクエリで判定できるようになりました。

ちなみに、外観モードはmacOS Mojave以降で[システム環境設定]→[一般]→「外観モード:」で変更できる、UIの色を選択できる機能の事です。

外観モードの変更

対応ブラウザが現状Safariの12.1でないと使えないので、わざわざ実装する機会は少ないと思いますが、Macのシステム環境内の状態を判定できるのは面白いので紹介しておきます。

実際の動作

実際の動作を確認するためにはSafariのバージョンが12.1以上の必要があるため、AppleのDeveloperサイトよりSafariの12.1のベータ番をダウンロード(もしくはSadari Technology Previewをダウンロード)してください。

Safari12.1で下のプレビューを見ながらダークモードに切り替えると、それに合わせてスタイルが変わります。

実装方法

実装方法は非常に簡単で、メディアクエリで「prefers-color-scheme: dark」または「prefers-color-scheme: light」を指定するだけです。Safari 12.1のRelease Notesにもそのように書かれています。

Added support for the CSS media queries prefers-color-scheme: light and prefers-color-scheme: dark.

Safari 12.1 Release Notes

@media (prefers-color-scheme: dark){
  ダークモード時の内容
}
@media (prefers-color-scheme: light){
  ライトモード時の内容
}

この感じだと、iOSにもダークモードが搭載されそうですね。
そうなってくると、ブログやニュースサイトなどの読み物系のサイトには、どんどんダークモードが実装されていきそうです。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね