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
prefers-color-schemaの話
Search
circled9
April 12, 2019
Technology
0
670
prefers-color-schemaの話
circled9
April 12, 2019
Tweet
Share
More Decks by circled9
See All by circled9
キースイッチ入門
circled9
0
75
CloudflareのAI関連の機能さわってみた
circled9
0
610
0.0.0.0 day
circled9
0
110
小数の丸め誤差の話
circled9
0
140
数値の文字列をパースしよう
circled9
0
230
🔥 Hono v4 やってみた
circled9
1
190
JetBrains AI Assistant を試してみた
circled9
1
530
Fresh
circled9
0
240
React Hooks 勉強会 vol.3
circled9
2
440
Other Decks in Technology
See All in Technology
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
210
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
140
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
Claude Code に プロジェクト管理やらせたみた
unson
6
4.3k
Lazy application authentication with Tailscale
bluehatbrit
0
220
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
370
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
3
9.5k
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
370
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
140
ビギナーであり続ける/beginning
ikuodanaka
3
760
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
Visualization
eitanlees
146
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Speed Design
sergeychernyshev
32
1k
GraphQLとの向き合い方2022年版
quramy
49
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Unsuck your backbone
ammeep
671
58k
How to train your dragon (web standard)
notwaldorf
95
6.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Thoughts on Productivity
jonyablonski
69
4.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Transcript
prefers-color-schemaの話 water-cell tech night #3 1
Intro prefers-color-schema はシステムのカラーテーマを検出するメディア特性。 Media Queries Level 5 に含まれている仕様の⼀つ。 User Preference
Media Features と呼ばれる仕様の⼀つ。 ちなみに現在の勧告は Media Queries Level 3 2
対応ブラウザ Firefox 67以降 (= Developer Edition) Safari 12.1以降 3
Example @media (prefers-color-scheme: light) { background-color: white; color: black; }
@media (prefers-color-scheme: dark) { background-color: black; color: white; } 4
Issue 画像などが元のままだと浮く 5
他のUser Preference Media Features prefers-reduced-motion(reduce): アニメーションなどの動きを減らす prefers-reduced-transparency(reduce): 透過表現を減らす prefers-contrast(high, low):
コントラストの⾼低を要求する 6
参考URL prefers-color-scheme を⽤いた Dark Mode 対応と User Preference Media Features
| blog.jxck.io prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN 7