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

prefers-color-schemaの話

Avatar for circled9 circled9
April 12, 2019
Technology
0
670

 prefers-color-schemaの話

Avatar for circled9

circled9

April 12, 2019
Tweet

More Decks by circled9

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

Other Decks in Technology

See All in Technology
タイミーのデータモデリング事例と今後のチャレンジ
Avatar for Toshiki Tsuchikawa ttccddtoki
1
270
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
Avatar for Shumpei Miyawaki smiyawaki0820
1
420
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
Avatar for K.Osawa kkuv
1
360
AI専用のリンターを作る #yumemi_patch
Avatar for 弁護士ドットコム bengo4com
1
230
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
Avatar for Toru Makabe torumakabe
2
320
Github Copilot エージェントモードで試してみた
Avatar for Ochtum ochtum
0
130
強化されたAmazon Location Serviceによる新機能と開発者体験
Avatar for Yasunori Kirimoto dayjournal
3
230
Tokyo_reInforce_2025_recap_iam_access_analyzer
Avatar for h-ashisan hiashisan
0
130
Connect 100+を支える技術
Avatar for Yamakan kanyamaguc
0
110
ネットワーク保護はどう変わるのか？re:Inforce 2025最新アップデート解説
Avatar for Shun Tokuyama tokushun
0
140
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
Avatar for すてにゃん stefafafan
0
150
モバイル界のMCPを考える
Avatar for naoto33 naoto33
0
290

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
82
9.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
138
34k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.5k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
It's Worth the Effort
Avatar for 3n 3n
185
28k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k

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