Upgrade to Pro — share decks privately, control downloads, hide ads and more …

prefers-color-schemaの話

circled9
April 12, 2019
Technology
0
630

 prefers-color-schemaの話

circled9

April 12, 2019
Tweet

More Decks by circled9

See All by circled9
キースイッチ入門
circled9
0
42
CloudflareのAI関連の機能さわってみた
circled9
0
340
0.0.0.0 day
circled9
0
66
小数の丸め誤差の話
circled9
0
91
数値の文字列をパースしよう
circled9
0
120
🔥 Hono v4 やってみた
circled9
1
140
JetBrains AI Assistant を試してみた
circled9
1
390
Fresh
circled9
0
220
React Hooks 勉強会 vol.3
circled9
2
400

Other Decks in Technology

See All in Technology
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
310
スクラム成熟度セルフチェックツールを作って得た学びとその活用法
coincheck_recruit
1
140
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
180
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
170
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
470
誰も全体を知らない ～ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
220
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
300
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
2
590
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.8k
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
SREによる隣接領域への越境とその先の信頼性
shonansurvivors
2
520
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
120

Featured

See All Featured
How GitHub (no longer) Works
holman
310
140k
For a Future-Friendly Web
brad_frost
175
9.4k
Why Our Code Smells
bkeepers
PRO
334
57k
A better future with KSS
kneath
238
17k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Side Projects
sachag
452
42k
How to Ace a Technical Interview
jacobian
276
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Building Applications with DynamoDB
mza
90
6.1k
Six Lessons from altMBA
skipperchong
27
3.5k

Transcript

  1. prefers-color-schemaの話 water-cell tech night #3 1

  2. Intro prefers-color-schema はシステムのカラーテーマを検出するメディア特性。 Media Queries Level 5 に含まれている仕様の⼀つ。 User Preference

    Media Features と呼ばれる仕様の⼀つ。 ちなみに現在の勧告は Media Queries Level 3 2

  3. 対応ブラウザ Firefox 67以降 (= Developer Edition) Safari 12.1以降 3

  4. Example @media (prefers-color-scheme: light) { background-color: white; color: black; }

    @media (prefers-color-scheme: dark) { background-color: black; color: white; } 4

  5. Issue 画像などが元のままだと浮く 5

  6. 他のUser Preference Media Features prefers-reduced-motion(reduce): アニメーションなどの動きを減らす prefers-reduced-transparency(reduce): 透過表現を減らす prefers-contrast(high, low):

    コントラストの⾼低を要求する 6

  7. 参考URL prefers-color-scheme を⽤いた Dark Mode 対応と User Preference Media Features

    | blog.jxck.io prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN 7