prefers-color-schemaの話 water-cell tech night #3 1 

Intro prefers-color-schema はシステムのカラーテーマを検出するメディア特性。 Media Queries Level 5 に含まれている仕様の⼀つ。 User Preference Media Features と呼ばれる仕様の⼀つ。 ちなみに現在の勧告は Media Queries Level 3 2 

対応ブラウザ Firefox 67以降 (= Developer Edition) Safari 12.1以降 3 

Example @media (prefers-color-scheme: light) { background-color: white; color: black; } @media (prefers-color-scheme: dark) { background-color: black; color: white; } 4 

Issue 画像などが元のままだと浮く 5 

他のUser Preference Media Features prefers-reduced-motion(reduce): アニメーションなどの動きを減らす prefers-reduced-transparency(reduce): 透過表現を減らす prefers-contrast(high, low): コントラストの⾼低を要求する 6 

参考URL prefers-color-scheme を⽤いた Dark Mode 対応と User Preference Media Features | blog.jxck.io prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN 7