Slide 1
Slide 1 text
prefers-color-schemaの話
water-cell tech night #3
1
Slide 2
Slide 2 text
Intro
prefers-color-schema
はシステムのカラーテーマを検出するメディア特性。
Media Queries Level 5
に含まれている仕様の⼀つ。
User Preference Media Features
と呼ばれる仕様の⼀つ。
ちなみに現在の勧告は Media Queries Level 3
2
Slide 3
Slide 3 text
対応ブラウザ
Firefox 67以降 (= Developer Edition)
Safari 12.1以降
3
Slide 4
Slide 4 text
Example
@media (prefers-color-scheme: light) {
background-color: white;
color: black;
}
@media (prefers-color-scheme: dark) {
background-color: black;
color: white;
}
4
Slide 5
Slide 5 text
Issue
画像などが元のままだと浮く
5
Slide 6
Slide 6 text
他のUser Preference Media Features
prefers-reduced-motion(reduce): アニメーションなどの動きを減らす
prefers-reduced-transparency(reduce): 透過表現を減らす
prefers-contrast(high, low): コントラストの⾼低を要求する
6
Slide 7
Slide 7 text
参考URL
prefers-color-scheme を⽤いた Dark Mode 対応と User Preference Media Features |
blog.jxck.io
prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN
7