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
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
LayerXにおけるセキュリティ管理の現在地と次の一手
Avatar for tosho tosho
0
100
新しいVibe Codingと”自走”について
Avatar for watany watany
6
310
Android の公式 Skill / Android skills
Avatar for Yuki Anzai yanzm
0
140
作って終わりにしない タイミーのセマンティックレイヤー育成の現在地
Avatar for chanyou0311 chanyou0311
4
2.3k
Chainlitで作るお手軽チャットUI
Avatar for tomo ynt0485
0
230
【NRUG vol.18】なぜ多くのオブザーバビリティ導入は失敗するのか
Avatar for NRUG member nrug_member
0
110
Building applications in the Gemini API family.
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3.2k
機械学習を「社会実装」するということ 2026年夏版 / Social Implementation of Machine Learning June 2026 Version
Avatar for Moe Uchiike（内池 もえ） moepy_stats
5
1.8k
社内 AI エージェント Synapse と セマンティックレイヤーの育て方
Avatar for Hiroaki Sano hiroakis
3
1.8k
Snowflakeと仲良くなる第一歩
Avatar for あべ coco_se
4
440
やさしいA2A入門
Avatar for みのるん minorun365
PRO
12
1.8k
SONiC Scale-Up Working Group から探る Scale-UpやUltraEthernet機能の実装方法
Avatar for ebiken ebiken
PRO
2
210

Featured

See All Featured
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
170
Between Models and Reality
Avatar for mayunak mayunak
4
330
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
250
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
280
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
350
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
790
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
190
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.4k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.7k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k

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