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
110
CloudflareのAI関連の機能さわってみた
Avatar for circled9 circled9
0
950
0.0.0.0 day
Avatar for circled9 circled9
0
140
小数の丸め誤差の話
Avatar for circled9 circled9
0
160
数値の文字列をパースしよう
Avatar for circled9 circled9
0
280
🔥 Hono v4 やってみた
Avatar for circled9 circled9
1
250
JetBrains AI Assistant を試してみた
Avatar for circled9 circled9
1
600
Fresh
Avatar for circled9 circled9
0
280
React Hooks 勉強会 vol.3
Avatar for circled9 circled9
2
460

Other Decks in Technology

See All in Technology
[MIRU26] Open-Vocabulary Intention-Guided Object Detection in Diverse Scenes
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
0
130
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
3.1k
【CEDEC2026】『ウマ娘 プリティーダービー』 英語版のキャラクターの方言や口調をローカライズするための創造的アプローチ
Avatar for Cygames, Inc. cygames
PRO
1
150
NYC Summit 2026 における Amazon Bedrock AgentCore のアップデート
Avatar for Renya Kujirada ren8k
3
320
AI驚き屋発見器
Avatar for Yuuki Yamashita yama3133
2
400
データエンジニアこそ組織のオントロジーに向き合うべき — 問いに答えるAIから、事業を動かすAIへ
Avatar for harry gappy50
7
3.2k
Issue設計から始める仕様駆動開発 / 20260731 Mizuki Hirata
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
120
20260722_品質と開発生産性の相互作用
Avatar for MagicPod magicpod
0
110
AWS ネットワーク構築でハマった（ハマりかけた） 5選とそこから得た教訓
Avatar for nagisa_53 nagisa53
4
170
システム監視を 「システムを監視するだけ」で 終わらせないために
Avatar for sei_ud seiud
0
170
名古屋の市バスGTFS-JPデータ×スガキヤ 最寄りバス停検索をAmazon ElastiCache Serverless for Valkeyで最適化する
Avatar for usanchuu usanchuu
1
170
【CEDEC2026】専門性の高いデフォルメチームが挑んだ人材育成戦略 〜Cygames Academiaの企画から実施まで〜
Avatar for Cygames, Inc. cygames
PRO
0
120

Featured

See All Featured
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
460
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.4k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
470
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
310
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
360
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.2k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
560
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
300
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k

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