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
690
prefers-color-schemaの話
circled9
April 12, 2019
Tweet
Share
More Decks by circled9
See All by circled9
キースイッチ入門
circled9
0
82
CloudflareのAI関連の機能さわってみた
circled9
0
710
0.0.0.0 day
circled9
0
110
小数の丸め誤差の話
circled9
0
150
数値の文字列をパースしよう
circled9
0
240
🔥 Hono v4 やってみた
circled9
1
200
JetBrains AI Assistant を試してみた
circled9
1
540
Fresh
circled9
0
260
React Hooks 勉強会 vol.3
circled9
2
440
Other Decks in Technology
See All in Technology
[VPoE Global Summit] サービスレベル目標による信頼性への投資最適化
satos
0
190
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
0
130
WEBサービスを成り立たせるAWSサービス
takano0131
1
190
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
150
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
510
Node.js 2025: What's new and what's next
ruyadorno
0
710
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
200
Building a cloud native business on open source
lizrice
0
140
Digitization部 紹介資料
sansan33
PRO
1
5.6k
ソースを読むプロセスの例
sat
PRO
15
9.6k
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
540
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Into the Great Unknown - MozCon
thekraken
40
2.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Fireside Chat
paigeccino
40
3.7k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
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