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