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

prefers-color-schemaの話

Avatar for circled9 circled9
April 12, 2019
Technology
0
690

 prefers-color-schemaの話

Avatar for circled9

circled9

April 12, 2019
Tweet

More Decks by circled9

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

Other Decks in Technology

See All in Technology
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
Avatar for maimyyym maimyyym
4
3.4k
AWSにおけるTrend Vision Oneの効果について
Avatar for shima shimak
0
140
​Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
Avatar for Strapi vcoisne
0
110
自動テストのコストと向き合ってみた
Avatar for SmartHR 品質保証部 qa
0
210
【Oracle Cloud ウェビナー】クラウド導入に「専用クラウド」という選択肢、Oracle AlloyとOCI Dedicated Region とは
Avatar for oracle4engineer oracle4engineer
PRO
3
120
動画データのポテンシャルを引き出す！ Databricks と AI活用への奮闘記（現在進行形）
Avatar for Databricks Japan databricksjapan
0
170
SoccerNet GSRの紹介と技術応用：選手視点映像を提供するサッカー作戦盤ツール
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
190
Git in Team
Avatar for Yasunobu Kawaguchi kawaguti
PRO
2
320
AWS Top Engineer、浮いてませんか？ / As an AWS Top Engineer, Are You Out of Place?
Avatar for Yuji Oshima yuj1osm
2
180
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに？ 私とRubyを繋いだRail(s)
Avatar for joy joyfrommasara
0
180
Where will it converge?
Avatar for Ibukun Adedeji ibknadedeji
0
200
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
Avatar for BrainPad brainpadpr
3
340

Featured

See All Featured
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.1k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k

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