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

prefers-color-schemaの話

Avatar for circled9 circled9
April 12, 2019
Technology
720
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
900
0.0.0.0 day
Avatar for circled9 circled9
0
130
小数の丸め誤差の話
Avatar for circled9 circled9
0
150
数値の文字列をパースしよう
Avatar for circled9 circled9
0
270
🔥 Hono v4 やってみた
Avatar for circled9 circled9
1
240
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
自称宇宙最速で不合格となったAIP-C01にリベンジを果たすべくAIで問題集アプリを作ってみた。
Avatar for Yuuki Yamashita yama3133
0
110
シンデレラなんかになりたくない！ガラスの靴が割れた時代にどう歩く？
Avatar for Nomizo Nomizo nomizone
0
190
Node.js+TypeScriptにおけるCJS/ESM相互運用の最新ポイント
Avatar for Naoki Kiryu grainrigi
2
120
TSKaigi 2026 - 型プラグインシステムの実装に使われるテクニック
Avatar for teamLab teamlab
PRO
2
350
実践 TanStack Start ― 新規プロダクトを開発して確立した、サーバーとクライアント境界の設計パターン / Practical TanStack Start Server-Client Boundary Patterns
Avatar for 株式会社カミナシ kaminashi
2
310
long-running-tasks
Avatar for cipepser cipepser
2
290
Python開発環境にハーネス適用を検討する
Avatar for yuuuka yuuka51
1
500
Geek Woman の育ち方 〜コミュニティとAIと〜
Avatar for chicaco chicaco
0
410
CloudFront VPCオリジンとVPC Latticeサービスの内部ALBをマルチアカウントで一元利用しよう
Avatar for k-kun duelist2020jp
5
230
はじめてのAI-DLC
Avatar for 吉田真吾 yoshidashingo
2
520
ラズパイ & Picoで入門：Zephyr(RTOS)の環境構築からビルドまでの紹介
Avatar for misoji engineer iotengineer22
0
220
TypeScript で Platform SDK を作る技術
Avatar for Akira HIGUCHI toiroakr
1
260

Featured

See All Featured
エンジニアに許された特別な時間の終わり
Avatar for watany watany
107
240k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
Design in an AI World
Avatar for tapps tapps
1
210
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
1
94
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.1k
How to make the Groovebox
Avatar for あそなす asonas
2
2.2k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
70
39k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
570

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