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
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.2k
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
ビギナーであり続ける/beginning
ikuodanaka
3
760
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
280
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
530
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
10
4.7k
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
200
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.9k
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
MobileActOsaka_250704.pdf
akaitadaaki
0
130
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Site-Speed That Sticks
csswizardry
10
690
Speed Design
sergeychernyshev
32
1k
Building an army of robots
kneath
306
45k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Invisible Side of Design
smashingmag
301
51k
Adopting Sorbet at Scale
ufuk
77
9.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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