More than 3 years have passed since last update.

CSSでダークモード時のスタイルを指定する

Posted at 2020-08-29

prefers-color-scheme: darkの中にダークモード時のスタイルを記述する

@charset "UTF-8";

body {
    color: #333;
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
    body {
        background: #333;
        color: #fff;
    }
}

その他

2020年8月時点でIEは未対応
https://caniuse.com/#feat=mdn-css_at-rules_media_prefers-color-scheme

@media (prefers-color-scheme: light) もある
https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up