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

prefers-color-schemaの話

Avatar for circled9 circled9
April 12, 2019
Technology
0
700

 prefers-color-schemaの話

Avatar for circled9

circled9

April 12, 2019
Tweet

More Decks by circled9

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

Other Decks in Technology

See All in Technology
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
Avatar for Kuniaki Moriya zepprix
0
470
プロダクト成長を支える開発基盤とスケールに伴う課題
Avatar for yuu26 yuu26
4
1.4k
Oracle AI Database 移行・アップグレード勉強会 - RAT活用編
Avatar for oracle4engineer oracle4engineer
PRO
0
110
AIエージェントを開発しよう！-AgentCore活用の勘所-
Avatar for YukiOgawa yukiogawa
0
180
Webhook best practices for rock solid and resilient deployments
Avatar for Guillaume Laforge glaforge
2
300
Frontier Agents (Kiro autonomous agent / AWS Security Agent / AWS DevOps Agent) の紹介
Avatar for msysh msysh
3
180
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
15
400k
マネージャー視点で考えるプロダクトエンジニアの評価 / Evaluating Product Engineers from a Manager's Perspective
Avatar for hiro-torii hiro_torii
0
150
インフラエンジニア必見!Kubernetesを用いたクラウドネイティブ設計ポイント大全
Avatar for 高棹大樹 daitak
1
380
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
Avatar for shibayu36 shibayu36
0
280
今こそ学びたいKubernetesネットワーク ～CNIが繋ぐNWとプラットフォームの「フラッと」な対話
Avatar for Takuto Nagami logica0419
3
300
AIエージェントに必要なのはデータではなく文脈だった/ai-agent-context-graph-mybest
Avatar for Jun Naito jonnojun
1
230

Featured

See All Featured
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
170
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.2k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
0
260
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
320
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
130
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.4k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
200
Abbi's Birthday
Avatar for Violet Bock coloredviolet
1
4.8k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
170
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
54

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