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
Matsui Masashi
April 12, 2019
Technology
0
600
prefers-color-schemaの話
Matsui Masashi
April 12, 2019
Tweet
Share
More Decks by Matsui Masashi
See All by Matsui Masashi
数値の文字列をパースしよう
circled9
0
65
🔥 Hono v4 やってみた
circled9
1
97
JetBrains AI Assistant を試してみた
circled9
1
310
Fresh
circled9
0
190
React Hooks 勉強会 vol.3
circled9
2
370
JSON.stringify()
circled9
2
430
HTML
circled9
2
920
Bundle Transpile Rock'n'Roll
circled9
0
1.6k
Hello React hooks
circled9
0
710
Other Decks in Technology
See All in Technology
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
740
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
140
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.6k
Azure AI ことはじめ
tsubakimoto_s
0
130
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
A Philosophy of Restraint
colly
200
16k
KATA
mclloyd
20
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Building an army of robots
kneath
301
42k
Practical Orchestrator
shlominoach
185
10k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Speed Design
sergeychernyshev
9
270
Robots, Beer and Maslow
schacon
PRO
157
8.1k
How to train your dragon (web standard)
notwaldorf
79
5.5k
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