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

2025-02-21 Browser and UI #1

1. color-scheme: light dark; を完全に理解する 2025-02-21 Browser and UI #1 CSS uhyo
2. これまでのあらすじ ぼく「適当にReactアプリを作りたいな。 とりあえず npm create viteしよう」 2
3. おなじみの初期画面 3
4. CSSを見るとこんな記述が！ 4
5. このCSSはどういう意味？ color-scheme: light dark; 5
6. color-schemeプロパティ 仕様的な解説は以前書いたこの記事を参照（宣伝） でも直観的にどういう意味なのかよくわからない 6
7. color-schemeプロパティ color-scheme: light; • ライトテーマってこと？ color-scheme: dark; • ダークテーマってこと？ color-scheme: light dark; • ？？？ 7
8. This Talk color-scheme: light dark; これの意味を完全に理解することを目指して 解説します 8
9. 結論 color-scheme: light dark; これは 「このページはライトテーマも ダークテーマも対応しているよ！」 という宣言です。 9
10. ライトテーマもダークテーマも 対応してるとは @mediaでprefers-color-schemeなどを使って ライトモード向けとダーク モード向けのスタイルを出 しわけていること。 （Viteの初期実装はdarkをデフォルトにして lightの場合にスタイル上書きする派） 10
11. color-scheme: light dark; の効果 11
12. UIのレンダリングが異なる color-scheme: light dark; が適用されている 場合、スクロールバーや、各種コントロールの レンダリングがライトモードとダークモードで 変化する。（画像はWindowsのGoogle Chrome） 12
13. 片方だけにすると…… color-scheme: dark; にすると、 UIは常にダークテーマ向けに描画される。 逆も同じ。 13
14. 併記するのは両対応という意味 color-scheme: light dark; は両対応という 意味。この場合、ユーザーやOSの設定に合わせて 選択される。 （基本的には@media(prefers-color-scheme) と一致 するカラーテーマが選択される） 14
15. 初期値は？ 初期値はcolor-scheme: normal;で、 これは基本的にUIの描画に影響しない。 （大抵のブラウザはライトモードと一致したUIになる） これは後方互換性のため。 昔作られたページでブラウザが勝手にダーク テーマ用UIにすると、意図と異なる表示になって しまう。 15
16. 互換性の問題 特にcolor-schemeを使わず、#666背景にブラウザ のデフォルトのボタンを配置した場合の表示 （WindowsのGoogle Chromeの場合） 16
17. 互換性の問題 ブラウザが勝手にダークモード用のUIを適用 すると、ボタンが背景に同化してしまう！ 17
18. color-schemeはオプトインのための機能 ブラウザとしては、ユーザーがダークモードを 希望している場合は各種UIもダークモード向けに したい。 しかし、ページが白基調（ダークモード未対応） なのにUIだけダークモードになったら不自然。 先ほどみたような互換性の問題もある。 18
19. color-schemeはオプトインのための機能 ページ側から「このページはダークモードUIにも 対応してるよ！」とブラウザに教えてあげるのが color-scheme: light dark; である。 つまり、ブラウザのデフォルトUIの色出し分け 機能にオプトインするということ。 19
20. オプトインのために必要なこと オプトインするためには、ブラウザがライト モード・ダークモードのどちらのUIでも、 いい感じにページを表示できる必要がある。 （特に色のコントラストとか） そのためにprefers-color-schemeなどの道具を 使う必要がある。 （ほかの道具はシステムカラーなど） 20
21. 余談: @media以外の方法 システムカラー background-color: canvas; color: canvastext; light-dark()関数 color: light-dark(#333b3c, #efefec); background-color: light-dark(#efedea, #223a2c); 21
22. color-schemeの他の使い方 逆に、ユーザーの設定とか関係なく常に 黒基調で表示されるページの場合は、 color-scheme: dark; を設定するのが適切。 「このページはダークモードのみなのでダーク モード向けUIで表示してね！」という意味になる。 22
23. 補足 •このトークではページ全体にcolor-schemeを 適用する前提で話しましたが、一部の要素にだけ 適用することもできます。 • color-scheme: only light; などの話は 今日は省略。 23
24. これだけ覚えて帰ってほしいまとめ @media(prefers-color-scheme)などを使っている ページは、color-scheme: light dark;を 指定できます。指定しよう。 常に黒背景なページはcolor-scheme: dark; を指定しよう。 （常に白背景なページも同じ。実用上あまり意味がないかもしれないが） 24