# Safari 12.1から外観モード（ライト/ダーク）の判定をCSSで行えるように！

URL: https://webrandum.net/safari-appearance-mode/
公開日: 2019-02-04
更新日: 2019-02-04
カテゴリー: コーディング
タグ: CSS
出典: Webrandum（著者: サイトウ マサカズ）

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

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

![外観モードの変更](https://webrandum.net/mskz/wp-content/uploads/2019/02/mode.png)

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

## 実際の動作

> Safari 12.1からCSSでダークモードの判定が出来るようになった。メディアクエリで「prefers-color-scheme: dark」を指定する。https://t.co/d9EeFLze3x pic.twitter.com/yX3E1NPNef
> — サイトウ マサカズ (@31mskz10) February 2, 2019

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

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

  See the Pen [prefers-color-scheme: dark](https://codepen.io/31mskz10/pen/KJmZZW/) by Masakazu Saito

  ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

## 実装方法

実装方法は非常に簡単で、メディアクエリで「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にもダークモードが搭載されそうですね。

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