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

prefers-color-schemaの話

Avatar for circled9 circled9
April 12, 2019
Technology
0
670

 prefers-color-schemaの話

Avatar for circled9

circled9

April 12, 2019
Tweet

More Decks by circled9

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

Other Decks in Technology

See All in Technology
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
Avatar for coconala_engineer coconala_engineer
1
4.4k
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
Avatar for PLAID Tech plaidtech
PRO
0
390
Autify Company Deck
Avatar for Autify autifyhq
2
44k
Maintainer Meetupで「生の声」を聞く ～講演だけじゃないKubeCon
Avatar for Takuto Nagami logica0419
0
110
SREのためのeBPF活用ステップアップガイド
Avatar for Sohei Iwahori egmc
2
1.3k
三視点LLMによる複数観点レビュー
Avatar for リリカル mhlyc
0
230
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
820
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
Avatar for GENDA genda
1
270
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.2k
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
Avatar for tomoki10 tomoki10
1
670
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
Avatar for VTRyo vtryo
3
1.9k
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
Avatar for kazeburo kazeburo
1
590

Featured

See All Featured
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.9k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
58
9.5k
Faster Mobile Websites
Avatar for Dean Hume deanohume
308
31k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
299
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
5.9k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k

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