Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

prefers-color-schemaの話

Avatar for circled9 circled9
April 12, 2019
Technology
0
700

 prefers-color-schemaの話

Avatar for circled9

circled9

April 12, 2019
Tweet

More Decks by circled9

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

Other Decks in Technology

See All in Technology
Lookerで実現するセキュアな外部データ提供
Avatar for ZOZO Developers zozotech
PRO
0
190
プロンプトやエージェントを自動的に作る方法
Avatar for shibuiwilliam shibuiwilliam
15
15k
Building Serverless AI Memory with Mastra × AWS
Avatar for vvatanabe vvatanabe
0
180
AgentCore BrowserとClaude Codeスキルを活用した 『初手AI』を実現する業務自動化AIエージェント基盤
Avatar for Hirokatsu Endo ruzia
7
770
アプリにAIを正しく組み込むための アーキテクチャ── 国産LLMの現実と実践
Avatar for Yasushi Taki kohju
0
170
20251219 OpenIDファウンデーション・ジャパン紹介 / OpenID Foundation Japan Intro
Avatar for OpenID Foundation Japan oidfj
0
390
Oracle Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
1
740
Database イノベーショントークを振り返る/reinvent-2025-database-innovation-talk-recap
Avatar for emi emiki
0
250
Kiro を用いたペアプロのススメ
Avatar for Taiki Sugawara taikis
4
1.4k
S3を正しく理解するための内部構造の読解
Avatar for NRI Netcom nrinetcom
PRO
3
230
AIの長期記憶と短期記憶の違いについてAgentCoreを例に深掘ってみた
Avatar for やくも yakumo
4
470
AlmaLinux + KVM + Cockpit で始めるお手軽仮想化基盤 ～ 開発環境などでの利用を想定して ～
Avatar for koedoyoshida koedoyoshida
0
140

Featured

See All Featured
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.8k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
0
180
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
120
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
1
1.5k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
2
61
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
20
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
1
860
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
0
160
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
540
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
23

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