color-scheme: light dark; を完全に理解する

color-scheme: light dark; を完全に理解する 2025-02-21 Browser and UI #1 CSS
uhyo

これまでのあらすじぼく「適当にReactアプリを作りたいな。とりあえず npm create viteしよう」 2

おなじみの初期画面 3

CSSを見るとこんな記述が！ 4

このCSSはどういう意味？ color-scheme: light dark; 5

color-schemeプロパティ仕様的な解説は以前書いたこの記事を参照（宣伝）でも直観的にどういう意味なのかよくわからない 6

color-schemeプロパティ color-scheme: light; • ライトテーマってこと？ color-scheme: dark; • ダークテーマってこと？ color-scheme:
light dark; • ？？？ 7

This Talk color-scheme: light dark; これの意味を完全に理解することを目指して解説します 8

結論 color-scheme: light dark; これは「このページはライトテーマもダークテーマも対応しているよ！」という宣言です。 9

ライトテーマもダークテーマも対応してるとは @mediaでprefers-color-schemeなどを使ってライトモード向けとダークモード向けのスタイルを出しわけていること。（Viteの初期実装はdarkをデフォルトにして lightの場合にスタイル上書きする派） 10

color-scheme: light dark; の効果 11

UIのレンダリングが異なる color-scheme: light dark; が適用されている場合、スクロールバーや、各種コントロールのレンダリングがライトモードとダークモードで変化する。（画像はWindowsのGoogle Chrome） 12

片方だけにすると…… color-scheme: dark; にすると、 UIは常にダークテーマ向けに描画される。逆も同じ。 13

併記するのは両対応という意味 color-scheme: light dark; は両対応という意味。この場合、ユーザーやOSの設定に合わせて選択される。（基本的には@media(prefers-color-scheme) と一致するカラーテーマが選択される）
14

初期値は？初期値はcolor-scheme: normal;で、これは基本的にUIの描画に影響しない。（大抵のブラウザはライトモードと一致したUIになる）これは後方互換性のため。昔作られたページでブラウザが勝手にダークテーマ用UIにすると、意図と異なる表示になってしまう。 15

互換性の問題特にcolor-schemeを使わず、#666背景にブラウザのデフォルトのボタンを配置した場合の表示（WindowsのGoogle Chromeの場合） 16

互換性の問題ブラウザが勝手にダークモード用のUIを適用すると、ボタンが背景に同化してしまう！ 17

color-schemeはオプトインのための機能ブラウザとしては、ユーザーがダークモードを希望している場合は各種UIもダークモード向けにしたい。しかし、ページが白基調（ダークモード未対応）なのにUIだけダークモードになったら不自然。先ほどみたような互換性の問題もある。 18

color-schemeはオプトインのための機能ページ側から「このページはダークモードUIにも対応してるよ！」とブラウザに教えてあげるのが color-scheme: light dark; である。つまり、ブラウザのデフォルトUIの色出し分け機能にオプトインするということ。 19

オプトインのために必要なことオプトインするためには、ブラウザがライトモード・ダークモードのどちらのUIでも、いい感じにページを表示できる必要がある。（特に色のコントラストとか）そのためにprefers-color-schemeなどの道具を使う必要がある。（ほかの道具はシステムカラーなど） 20

余談: @media以外の方法システムカラー background-color: canvas; color: canvastext; light-dark()関数 color: light-dark(#333b3c,
#efefec); background-color: light-dark(#efedea, #223a2c); 21

color-schemeの他の使い方逆に、ユーザーの設定とか関係なく常に黒基調で表示されるページの場合は、 color-scheme: dark; を設定するのが適切。「このページはダークモードのみなのでダークモード向けUIで表示してね！」という意味になる。 22

補足 •このトークではページ全体にcolor-schemeを適用する前提で話しましたが、一部の要素にだけ適用することもできます。 • color-scheme: only light; などの話は今日は省略。
23

これだけ覚えて帰ってほしいまとめ @media(prefers-color-scheme)などを使っているページは、color-scheme: light dark;を指定できます。指定しよう。常に黒背景なページはcolor-scheme: dark; を指定しよう。（常に白背景なページも同じ。実用上あまり意味がないかもしれないが）
24

color-scheme: light dark; を完全に理解する

color-scheme: light dark; を完全に理解する

uhyo

More Decks by uhyo

Other Decks in Programming

Featured

Transcript