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
740
0

 prefers-color-schemaの話

Avatar for circled9

circled9

April 12, 2019

More Decks by circled9

See All by circled9
キースイッチ入門
Avatar for circled9 circled9
0
130
CloudflareのAI関連の機能さわってみた
Avatar for circled9 circled9
0
1k
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
260
JetBrains AI Assistant を試してみた
Avatar for circled9 circled9
1
620
Fresh
Avatar for circled9 circled9
0
290
React Hooks 勉強会 vol.3
Avatar for circled9 circled9
2
470

Other Decks in Technology

See All in Technology
PagerDuty Tech Hub-鳴らすけれど、人は動かない
Avatar for shinji ezaki ezaki
0
170
"優秀な誰か"の下位互換にならないために
Avatar for Yuto Nagai(Future) yut0naga1_fa
1
1.8k
TinyGoでオブザーバビリティ？OpenTelemetryはTinyGoで使えるのか / Is OpenTelemetry available in TinyGo environment?
Avatar for ymotongpoo ymotongpoo
2
140
Rustuna: Rustによる高速なOptuna実装
Avatar for Preferred Networks pfn
PRO
0
190
実践！ SRE × AI - ABEMA における AIOps -
Avatar for tetsuya28 tetsuya28
8
3.1k
夫婦で子育てするための育児標準化
Avatar for コドモン開発チーム codmoninc
PRO
0
330
「Docker Desktop不要の時代」は 来たのか？
Avatar for ueponx ueponx
0
770
V8のArray.prototype.flatを最大約20倍速くするまでと、巨大OSSへの大規模コミットの道のり
Avatar for Riya Amemiya riyaamemiya
0
290
継続的なAIコスト最適化
Avatar for Atsushi Tanaka bgpat
1
340
AI駆動で「他アプリの音を加工できる」アプリを作った
Avatar for Masahiro satomasahiro2005
0
150
今さら理解するウェブフォントver.2026
Avatar for takanorip takanorip
3
770
AI駆動開発の時代になったのでトヨタ生産方式から見直す
Avatar for terurou terurou
7
6k

Featured

See All Featured
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.3k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
1
570
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
2
2.9k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Visualization
Avatar for Eitan Lees eitanlees
153
17k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.8k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
270
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
3
16k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
10
2.4k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
1
400
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
710
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
260

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