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
93
CloudflareのAI関連の機能さわってみた
Avatar for circled9 circled9
0
760
0.0.0.0 day
Avatar for circled9 circled9
0
120
小数の丸め誤差の話
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
560
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
AWS運用を効率化する！AWS Organizationsを軸にした一元管理の実践/nikkei-tech-talk-202512
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
170
Amazon Connect アップデート！ AIエージェントにMCPツールを設定してみた！
Avatar for Yosuke Suzuki ysuzuki
0
140
『君の名は』と聞く君の名は。 / Your name, you who asks for mine.
Avatar for NTT docomo Business nttcom
1
120
ハッカソンから社内プロダクトへ AIエージェント「ko☆shi」開発で学んだ4つの重要要素
Avatar for そのだ sonoda_mj
6
1.7k
Claude Codeを使った情報整理術
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
11
8k
Snowflake導入から1年、LayerXのデータ活用の現在 / One Year into Snowflake: How LayerX Uses Data Today
Avatar for Civitaspo civitaspo
0
2.5k
Snowflake Industry Days 2025 Nowcast
Avatar for tak takumimukaiyama
0
120
20251222_サンフランシスコサバイバル術
Avatar for ponponmikan ponponmikankan
2
140
2025-12-18_AI駆動開発推進プロジェクト運営について / AIDD-Promotion project management
Avatar for yayoi_dd yayoi_dd
0
160
New Relic 1 年生の振り返りと Cloud Cost Intelligence について #NRUG
Avatar for PLAY, inc. play_inc
0
240
なぜ あなたはそんなに re:Invent に行くのか？
Avatar for Kazuki Miura miu_crescent
PRO
0
210
AWSの新機能をフル活用した「re:Inventエージェント」開発秘話
Avatar for みのるん minorun365
2
470

Featured

See All Featured
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
170
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
1
210
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
3
35k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
30
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.7k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
0
3.4k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
130

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