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
730
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
意外と難しいGraphQLのスカラー型
uhyo
5
620
RSCの時代にReactとフレームワークの境界を探る
uhyo
12
3.9k
知られざるprops命名の慣習 アクション編
uhyo
12
3.1k
libsyncrpcってなに?
uhyo
0
690
Next.jsと状態管理のプラクティス
uhyo
7
13k
10ヶ月かけてstyled-components v4からv5にアップデートした話
uhyo
5
650
更新系と状態
uhyo
9
3.8k
React 19アップデートのために必要なこと
uhyo
8
2.7k
React 19 + Jotaiを試して気づいた注意点
uhyo
9
3.6k
Other Decks in Programming
See All in Programming
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1k
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
240
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
510
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.6k
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
900
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
140
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
3
170
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.3k
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
370
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
150
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
The Invisible Side of Design
smashingmag
301
51k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Building Adaptive Systems
keathley
43
2.8k
What's in a price? How to price your products and services
michaelherold
246
12k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
570
Site-Speed That Sticks
csswizardry
11
880
Optimizing for Happiness
mojombo
379
70k
Balancing Empowerment & Direction
lara
4
680
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
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