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
690
prefers-color-schemaの話
circled9
April 12, 2019
Tweet
Share
More Decks by circled9
See All by circled9
キースイッチ入門
circled9
0
82
CloudflareのAI関連の機能さわってみた
circled9
0
700
0.0.0.0 day
circled9
0
110
小数の丸め誤差の話
circled9
0
150
数値の文字列をパースしよう
circled9
0
240
🔥 Hono v4 やってみた
circled9
1
200
JetBrains AI Assistant を試してみた
circled9
1
540
Fresh
circled9
0
260
React Hooks 勉強会 vol.3
circled9
2
440
Other Decks in Technology
See All in Technology
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
4
3.4k
AWSにおけるTrend Vision Oneの効果について
shimak
0
140
Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
vcoisne
0
110
自動テストのコストと向き合ってみた
qa
0
210
【Oracle Cloud ウェビナー】クラウド導入に「専用クラウド」という選択肢、Oracle AlloyとOCI Dedicated Region とは
oracle4engineer
PRO
3
120
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
170
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
190
Git in Team
kawaguti
PRO
2
320
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
180
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
180
Where will it converge?
ibknadedeji
0
200
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
340
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
14k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Writing Fast Ruby
sferik
629
62k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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