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
680
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
libsyncrpcってなに?
uhyo
0
540
Next.jsと状態管理のプラクティス
uhyo
7
7.3k
10ヶ月かけてstyled-components v4からv5にアップデートした話
uhyo
5
610
更新系と状態
uhyo
8
3.5k
React 19アップデートのために必要なこと
uhyo
8
2.5k
React 19 + Jotaiを試して気づいた注意点
uhyo
9
3.5k
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
3
3.3k
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
8
4.5k
非同期処理を活用しながらRust製wasmとJSを連携する方法(wasm-bindgenを使いたくない人向け)
uhyo
4
4.6k
Other Decks in Programming
See All in Programming
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.3k
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
100
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
650
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
190
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
710
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.1k
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
AIのメモリー
watany
12
1.2k
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
140
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
360
新しいモバイルアプリ勉強会(仮)について
uetyo
1
240
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Building Applications with DynamoDB
mza
95
6.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
GraphQLとの向き合い方2022年版
quramy
49
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
GitHub's CSS Performance
jonrohan
1031
460k
A designer walks into a library…
pauljervisheath
207
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
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