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
650
prefers-color-schemaの話
circled9
April 12, 2019
Tweet
Share
More Decks by circled9
See All by circled9
キースイッチ入門
circled9
0
57
CloudflareのAI関連の機能さわってみた
circled9
0
470
0.0.0.0 day
circled9
0
83
小数の丸め誤差の話
circled9
0
120
数値の文字列をパースしよう
circled9
0
180
🔥 Hono v4 やってみた
circled9
1
170
JetBrains AI Assistant を試してみた
circled9
1
460
Fresh
circled9
0
230
React Hooks 勉強会 vol.3
circled9
2
420
Other Decks in Technology
See All in Technology
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
230
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
550
エンジニアの健康管理術 / Engineer Health Management Techniques
y_sone
8
4.1k
20250304_赤煉瓦倉庫_DeepSeek_Deep_Dive
hiouchiy
2
140
プロダクト開発者目線での Entra ID 活用
sansantech
PRO
0
170
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
240
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
560
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
書籍『入門 OpenTelemetry』 / Intro of OpenTelemetry book
ymotongpoo
4
160
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
180
貧民的プログラミングのすすめ
kakehashi
PRO
2
190
QAエンジニアが スクラムマスターをすると いいなぁと思った話
____rina____
0
190
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Automating Front-end Workflow
addyosmani
1369
200k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Site-Speed That Sticks
csswizardry
4
420
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Facilitating Awesome Meetings
lara
53
6.3k
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