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

prefers-color-schemaの話

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for circled9 circled9
April 12, 2019
Technology
0
710

 prefers-color-schemaの話

Avatar for circled9

circled9

April 12, 2019
Tweet

More Decks by circled9

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

Other Decks in Technology

See All in Technology
2026-03-11 JAWS-UG 茨城 #12 改めてALBを便利に使う
Avatar for SUZUKI Masashi masasuzu
2
410
Microsoft “Adaptive Cloud” Update 2026年3月版
Avatar for osamut sdosamut
0
100
実践 Datadog MCP Server
Avatar for 株式会社ヌーラボ nulabinc
PRO
2
250
イベントで大活躍する電子ペーパー名札を作る（その２） 〜 M5PaperとM5PaperS3 〜 / IoTLT @ JLCPCB オープンハードカンファレンス
Avatar for you（@youtoy） you
PRO
0
120
OpenClaw を Amazon Lightsail で動かす理由
Avatar for Uechi Shingo uechishingo
0
230
猫でもわかるKiro CLI(AI 駆動開発への道編)
Avatar for Hiroo Katoh kentapapa
0
270
Claude Code のコード品質がばらつくので AI に品質保証させる仕組みを作った話 / A story about building a mechanism to have AI ensure quality, because the code quality from Claude Code was inconsistent
Avatar for nrs nrslib
13
8.7k
AWS CDK「読めるけど書けない」を脱却するファーストステップ
Avatar for Makky12 smt7174
3
200
Go標準パッケージのI/O処理をながめる
Avatar for matumoto matumoto
0
240
Kiro Powers 入門
Avatar for Kazuki Adachi k_adachi_01
0
120
Goのerror型がシンプルであることの恩恵について理解する
Avatar for yamatai12 yamatai1212
1
260
モジュラモノリス導入から4年間の総括：アーキテクチャと組織の相互作用について / Architecture and Organizational Interaction
Avatar for Satoshi Kawashima nazonohito51
3
820

Featured

See All Featured
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
260
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
790
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
420
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
160
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
How to make the Groovebox
Avatar for あそなす asonas
2
2k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
180

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