Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

prefers-color-schemaの話

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for circled9 circled9
April 12, 2019
Technology
730
0

 prefers-color-schemaの話

Avatar for circled9

circled9

April 12, 2019

More Decks by circled9

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

Other Decks in Technology

See All in Technology
ペアプロの価値はコードを書くことだけじゃない
Avatar for コドモン開発チーム codmoninc
PRO
0
210
銀行勘定系システムにおける開発プロセス刷新×AIによる環境モダナイゼーション / Development Process Transformation and AI-Driven Environment Modernization
Avatar for 三菱UFJインフォメーションテクノロジー株式会社 muit
0
850
OpenTelemetry eBPF Instrumentationの舞台裏 / Behind the Scenes of OpenTelemetry eBPF Instrumentation
Avatar for ymotongpoo ymotongpoo
4
1.2k
AIエージェントの自己改善をどう設計するか / How to Design Self-Improvement for AI Agents
Avatar for 223 22mi
20
11k
Sigmaユーザーのための有用リソース一挙公開 & Sigmaで使えるMCP #sigma_ucj /useful-resources-for-sigma-computing-users-and-mcps-with-sigma
Avatar for shinyaa31 shinyaa31
0
200
「図書館」という名前のままでいいのか -Code4Lib JAPANカンファレンス2026 アンカンファレンス報告- / Code4Lib JAPAN Conference 2026: Unconference Report
Avatar for Kiyota Yoji, Ph.D. ykiyota
0
170
AI 駆動 Terraform 開発/SRE_BizReach_MIXI_2
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
5
2.1k
Screen Lens - 今見てる画面を翻訳する
Avatar for komagata komagata
0
260
日経電子版を支えていく Kasane Design System/fec_fukuoka
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
1.2k
例外の正しい扱い方 そのエラー try-catchして大丈夫？
Avatar for Watanabe Jin jinwatanabe
3
480
DEFCON_CHV_CTF_Write-up.pdf
Avatar for bata_24 bata_24
0
140
Tab5をRubyで動くパソコンにする
Avatar for Katsuhiko Kageyama kishima
2
360

Featured

See All Featured
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
370
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
280
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
9
36k
Docker and Python
Avatar for Tania Allard trallard
47
4.2k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
360
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6.1k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.7k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
540

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