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

prefers-color-schemaの話

Avatar for circled9 circled9
April 12, 2019
Technology
0
680

 prefers-color-schemaの話

Avatar for circled9

circled9

April 12, 2019
Tweet

More Decks by circled9

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

Other Decks in Technology

See All in Technology
AI開発ツールCreateがAnythingになったよ
Avatar for s sato tendasato
0
120
S3アクセス制御の設計ポイント
Avatar for tommy tommy0124
3
190
Firestore → Spanner 移行 を成功させた段階的移行プロセス
Avatar for a-thug athug
1
460
機械学習を扱うプラットフォーム開発と運用事例
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
230
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
Avatar for morimorikochan diggymo
3
200
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
Avatar for Masaya Kudo msykd
PRO
1
720
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
Avatar for KentaroFujii kentarofujii
0
130
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
Avatar for gowhich501 gowhich501
1
130
Codeful Serverless / 一人運用でもやり抜く力
Avatar for kensh _kensh
7
400
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
Avatar for pei0804 pei0804
1
170
ZOZOマッチのアーキテクチャと技術構成
Avatar for ZOZO Developers zozotech
PRO
3
1.5k
react-callを使ってダイヤログをいろんなとこで再利用しよう！
Avatar for shinaps shinaps
1
230

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
13k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
810
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.2k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.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