Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
color-scheme: light dark; を完全に理解する
Search
uhyo
February 17, 2025
Programming
8
630
color-scheme: light dark; を完全に理解する
2025-02-21 Browser and UI #1
uhyo
February 17, 2025
Tweet
Share
More Decks by uhyo
See All by uhyo
Next.jsと状態管理のプラクティス
uhyo
6
3.8k
10ヶ月かけてstyled-components v4からv5にアップデートした話
uhyo
5
560
更新系と状態
uhyo
8
2.8k
React 19アップデートのために必要なこと
uhyo
8
2.2k
React 19 + Jotaiを試して気づいた注意点
uhyo
9
3.3k
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
3
3.1k
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
8
4.1k
非同期処理を活用しながらRust製wasmとJSを連携する方法(wasm-bindgenを使いたくない人向け)
uhyo
4
4.5k
tsconfig.jsonの設定を見直そう!フロントエンド向け 2024夏
uhyo
26
11k
Other Decks in Programming
See All in Programming
Investigating Multithreaded PostgreSQL
macdice
0
140
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.4k
CRUD から CQRS へ ~ 分離が可能にする柔軟性
tkawae
0
220
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
120
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
190
Efficiency and Rock 'n’ Roll (Really!)
hollycummins
0
580
External SecretsのさくらProvider初期実装を担当しています
logica0419
0
210
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
120
バランスを見極めよう!実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
whatasoda
2
760
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
780
Design Pressure
hynek
0
1.4k
バリデーションライブラリ徹底比較
nayuta999999
1
360
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
840
Visualization
eitanlees
146
16k
Gamification - CAS2011
davidbonilla
81
5.3k
YesSQL, Process and Tooling at Scale
rocio
172
14k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Transcript
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