Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
990
0.0.0.0 day
Avatar for circled9 circled9
0
150
小数の丸め誤差の話
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
今話題のAI「Jev」って何？ 宇宙最速で学ぶ会
Avatar for みのるん minorun365
PRO
26
15k
その Lambda、8分で 管理者権限まで奪われます
Avatar for k1nakayama k1nakayama
5
2.8k
作品が生態系になった ─ Mini Tokyo 3D から世界へ
Avatar for 草薙昭彦 nagix
0
190
白金鉱業Meetup Vol.25 アウトカムが二値のデータに対するCausal Impact
Avatar for BrainPad brainpadpr
0
220
幾何アルゴリズムで なめらかなピン操作を / iOSDC Japan 2026 / smoothpin
Avatar for nade kazumanagano
0
350
HRC_Frontend_Conference_Fukuoka_2026.pdf
Avatar for takanori sugawara ts020
0
740
2026-09-11 【Snowflake World Tour Tokyo 2026】Snowflakeを起点に、AI Agentが自律稼働し続ける未来へ / Driving AI Agents with Snowflake
Avatar for civitaspo civitaspo
0
660
AI時代の「技術的負債」の変質ー概念の終焉と再解釈、エージェントと共に向かう先
Avatar for nwiizo nwiizo
1
2.7k
バイブコーディング時代のWebアプリ開発入門~Cloud Runで学ぶセキュアなビルドとデプロイ
Avatar for 尾﨑勇太/Yuta Ozaki waiwai2111
1
130
俺の仕事は AIに奪われないし、たぶんその BIも要らない
Avatar for Hikaru Sawahata hikaruri
0
500
SREは、MCPとAutopilotをこう使え！
Avatar for kazumax55 kazumax55
3
860
あるけみー式LTスライド作成術
Avatar for Ryotaro Harada alchemy1115
2
220

Featured

See All Featured
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
670
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
240
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2.1k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
3
14k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
330
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.6k

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