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

prefers-color-schemaの話

Avatar for circled9 circled9
April 12, 2019
Technology
0
700

 prefers-color-schemaの話

Avatar for circled9

circled9

April 12, 2019
Tweet

More Decks by circled9

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

Other Decks in Technology

See All in Technology
日本語テキストと音楽の対照学習の技術とその応用
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
380
Werner Vogelsが14年間 問い続けてきたこと
Avatar for Yusuke Shimizu yusukeshimizu
2
260
月間数億レコードのアクセスログ基盤を無停止・低コストでAWS移行せよ！アプリケーションエンジニアのSREチャレンジ💪
Avatar for miyamu miyamu
0
320
Deno・Bunの標準機能やElysiaJSを使ったWebSocketサーバー実装 / ラーメン屋を貸し切ってLT会! IoTLT 2026新年会
Avatar for you（@youtoy） you
PRO
0
140
Tebiki Engineering Team Deck
Avatar for Tebiki, Inc. tebiki
0
23k
書籍執筆での生成AIの活用
Avatar for Satoru Takeuchi sat
PRO
1
240
ゼロから始めたFindy初のモバイルアプリ開発
Avatar for Takahiro Kato grandbig
2
540
漸進的過負荷の原則
Avatar for SansanTech sansantech
PRO
3
420
Oracle Cloud Infrastructure：2026年1月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
200
2人で作ったAIダッシュボードが、開発組織の次の一手を照らした話― Cursor × SpecKit × 可視化の実践 ―　Qiita AI Summit
Avatar for NOBORU ITOU noalisaai
1
310
AI開発の落とし穴 〜馬には乗ってみよAIには添うてみよ〜
Avatar for SansanTech sansantech
PRO
10
5.5k
Amazon S3 Vectorsを使って資格勉強用AIエージェントを構築してみた
Avatar for usanchuu usanchuu
1
290

Featured

See All Featured
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
61
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
110
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
75
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
117
100k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
0
190
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
190
Abbi's Birthday
Avatar for Violet Bock coloredviolet
1
4.6k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
It's Worth the Effort
Avatar for 3n 3n
188
29k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k

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