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

prefers-color-schemaの話

Avatar for circled9 circled9
April 12, 2019
Technology
730
0

 prefers-color-schemaの話

Avatar for circled9

circled9

April 12, 2019

More Decks by circled9

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

Other Decks in Technology

See All in Technology
猫付きpingコマンドを自作
Avatar for uyuki uyuki234
0
300
LLM Internals: 언어 모델의 계보와 알고리즘 진화 (2023~2026)
Avatar for Jeongkyu Shin inureyes
PRO
1
900
tamachi.go 誕生の裏側
Avatar for ryoji miyamoto rymiyamoto
1
200
35分でわかるEffective Platform Engineering
Avatar for nwiizo nwiizo
5
620
現場回帰したデータエンジニアが考える AI 時代のキャリア開発 / Career Development in the Age of AI Perspectives from a Hands-on Data Engineer
Avatar for MEDLEY, INC. medley
0
320
強化学習「理論」入門
Avatar for Etsuji Nakai enakai00
3
3.6k
Head First モブプログラミング / Head First Mobprogramming
Avatar for TAKAKING22 takaking22
10
12k
VLMで2.3万枚のPyCon JP写真を検索！
Avatar for Manabu TERADA terapyon
1
420
あなたの知らないバージョン命名規則
Avatar for Satoru Takeuchi sat
PRO
2
390
Adding Right-to-Left support to your web
application with CSS logical properties — Lessons from Redmine
Avatar for MAEDA Go vividtone
0
180
形式手法特論：Hyperproperty とモデル検査 #kernelvm / Kernel VM Study Tokyo 19th
Avatar for y_taka_23 ytaka23
0
740
What's new in Go 1.27?
Avatar for Koya IWAMURA ciarana
0
380

Featured

See All Featured
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1.3k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
380
Between Models and Reality
Avatar for mayunak mayunak
4
400
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
280
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
270
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.9k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
280
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.8k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
250

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