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
620
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
250
React Hooks 勉強会 vol.3
circled9
2
440
Other Decks in Technology
See All in Technology
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4.4k
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
390
Autify Company Deck
autifyhq
2
44k
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
110
SREのためのeBPF活用ステップアップガイド
egmc
2
1.3k
三視点LLMによる複数観点レビュー
mhlyc
0
230
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
270
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
670
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
590
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
For a Future-Friendly Web
brad_frost
179
9.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Faster Mobile Websites
deanohume
308
31k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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