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
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
320
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
2
17k
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.8k
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
3
17k
LLM時代の検索
shibuiwilliam
2
190
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
What’s new in Android development tools
yanzm
0
320
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
3
7.3k
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
220
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
450
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Language of Interfaces
destraynor
158
25k
4 Signs Your Business is Dying
shpigford
184
22k
Music & Morning Musume
bryan
46
6.6k
For a Future-Friendly Web
brad_frost
179
9.8k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Scaling GitHub
holman
460
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Facilitating Awesome Meetings
lara
54
6.4k
Balancing Empowerment & Direction
lara
1
430
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