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

prefers-color-schemaの話

 prefers-color-schemaの話

Matsui Masashi

April 12, 2019
Tweet

More Decks by Matsui Masashi

Other Decks in Technology

Transcript

  1. prefers-color-schemaの話
    water-cell tech night #3
    1

    View full-size slide

  2. Intro
    prefers-color-schema
    はシステムのカラーテーマを検出するメディア特性。
    Media Queries Level 5
    に含まれている仕様の⼀つ。
    User Preference Media Features
    と呼ばれる仕様の⼀つ。
    ちなみに現在の勧告は Media Queries Level 3
    2

    View full-size slide

  3. 対応ブラウザ
    Firefox 67以降 (= Developer Edition)
    Safari 12.1以降
    3

    View full-size slide

  4. Example
    @media (prefers-color-scheme: light) {
    background-color: white;
    color: black;
    }
    @media (prefers-color-scheme: dark) {
    background-color: black;
    color: white;
    }
    4

    View full-size slide

  5. Issue
    画像などが元のままだと浮く
    5

    View full-size slide

  6. 他のUser Preference Media Features
    prefers-reduced-motion(reduce): アニメーションなどの動きを減らす
    prefers-reduced-transparency(reduce): 透過表現を減らす
    prefers-contrast(high, low): コントラストの⾼低を要求する
    6

    View full-size slide

  7. 参考URL
    prefers-color-scheme を⽤いた Dark Mode 対応と User Preference Media Features |
    blog.jxck.io
    prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN
    7

    View full-size slide