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

prefers-color-schemaの話

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
910
0.0.0.0 day
Avatar for circled9 circled9
0
130
小数の丸め誤差の話
Avatar for circled9 circled9
0
150
数値の文字列をパースしよう
Avatar for circled9 circled9
0
280
🔥 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
トークン数だけでは測れない — Claude Code 組織展開の効果検証から学んだこと
Avatar for Masaki Kubota makikub
0
140
エンジニアリング戦略の作り方 / Crafting Engineering Strategy
Avatar for iwashi iwashi86
10
2.9k
新しいVibe Codingと”自走”について
Avatar for watany watany
5
130
作って終わりにしない タイミーのセマンティックレイヤー育成の現在地
Avatar for chanyou0311 chanyou0311
1
720
生成 AI × MCP で切り拓く次世代 SRE！自律型運用への挑戦と開発者体験の進化
Avatar for _awache _awache
0
170
Claude Code×Terraform IaC テンプレート駆動開発
Avatar for Itou Hideki itouhi
1
450
GoとSIMDとWasmの今。
Avatar for asuka askua
3
520
自律型AIエージェントは何を破壊するのか
Avatar for kojira kojira
0
110
Snowflakeと仲良くなる第一歩
Avatar for あべ coco_se
2
190
「速く作る」から「正しく作る」へ ─ 生成AI時代の開発フロー改革の ロードマップと実行 ─
Avatar for starfish719 starfish719
0
8.9k
関西に縁あるMicrosoft MVPsが語るCopilotの未来
Avatar for Kaz Asada | しがない情シス kasada
0
1.2k
AI フレンドリーなエラー監視を TypeScript で実現する
Avatar for Shinobu Hayashi shinyaigeek
2
270

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
480
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.5k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.7k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
1
160
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
7
36k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
360

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