Upgrade to Pro — share decks privately, control downloads, hide ads and more …

prefers-color-schemaの話

Avatar for circled9 circled9
April 12, 2019
Technology
0
680

 prefers-color-schemaの話

Avatar for circled9

circled9

April 12, 2019
Tweet

More Decks by circled9

See All by circled9
キースイッチ入門
Avatar for circled9 circled9
0
78
CloudflareのAI関連の機能さわってみた
Avatar for circled9 circled9
0
660
0.0.0.0 day
Avatar for circled9 circled9
0
110
小数の丸め誤差の話
Avatar for circled9 circled9
0
150
数値の文字列をパースしよう
Avatar for circled9 circled9
0
240
🔥 Hono v4 やってみた
Avatar for circled9 circled9
1
200
JetBrains AI Assistant を試してみた
Avatar for circled9 circled9
1
540
Fresh
Avatar for circled9 circled9
0
250
React Hooks 勉強会 vol.3
Avatar for circled9 circled9
2
440

Other Decks in Technology

See All in Technology
リモートワークで心掛けていること 〜AI活用編〜
Avatar for naoki85 naoki85
0
200
Backlog AI アシスタントが切り開く未来
Avatar for vvatanabe vvatanabe
1
170
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
Avatar for Yuki Anzai yanzm
0
160
生成AIによるデータサイエンスの変革
Avatar for Takaaki Yayoi taka_aki
0
3.1k
S3のライフサイクル設計でハマったポイント
Avatar for Kumada mkumada
0
100
AI時代の大規模データ活用とセキュリティ戦略
Avatar for Kengo Suzuki ken5scal
1
270
Rethinking Incident Response: Context-Aware AI in Practice - Incident Buddy Edition -
Avatar for rrreeeyyy rrreeeyyy
0
130
形式手法特論：位相空間としての並行プログラミング #kernelvm / Kernel VM Study Tokyo 18th
Avatar for y_taka_23 ytaka23
3
1.6k
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
Avatar for oracle4engineer oracle4engineer
PRO
2
6.4k
[OCI Technical Deep Dive] OCIで生成AIを活用するためのソリューション解説(2025年8月5日開催)
Avatar for oracle4engineer oracle4engineer
PRO
0
130
2025新卒研修・Webアプリケーションセキュリティ #弁護士ドットコム
Avatar for 弁護士ドットコム bengo4com
3
9.9k
Mackerel in さくらのクラウド
Avatar for Tatsuhiko Kubo cubicdaiya
1
370

Featured

See All Featured
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.6k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.4k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
20k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
268
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k

Transcript

  1. prefers-color-schemaの話 water-cell tech night #3 1

  2. Intro prefers-color-schema はシステムのカラーテーマを検出するメディア特性。 Media Queries Level 5 に含まれている仕様の⼀つ。 User Preference

    Media Features と呼ばれる仕様の⼀つ。 ちなみに現在の勧告は Media Queries Level 3 2

  3. 対応ブラウザ Firefox 67以降 (= Developer Edition) Safari 12.1以降 3

  4. Example @media (prefers-color-scheme: light) { background-color: white; color: black; }

    @media (prefers-color-scheme: dark) { background-color: black; color: white; } 4

  5. Issue 画像などが元のままだと浮く 5

  6. 他のUser Preference Media Features prefers-reduced-motion(reduce): アニメーションなどの動きを減らす prefers-reduced-transparency(reduce): 透過表現を減らす prefers-contrast(high, low):

    コントラストの⾼低を要求する 6

  7. 参考URL prefers-color-scheme を⽤いた Dark Mode 対応と User Preference Media Features

    | blog.jxck.io prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN 7