preferreds-color-scheme：CSS媒体查询

One device and app feature I've come to appreciate is the ability to change between light and dark modes. If you've ever done late night coding or reading, you know how amazing a dark theme can be for preventing eye strain and the headaches that result. macOS recently implemented a native dark mode but that mode doesn't convert websites to a dark interface, so you're still getting a bright site regardless of native theme. Wouldn't it be amazing if websites would also go dark or light based on user's system preference?

我逐渐欣赏的一种设备和应用功能是能够在亮模式和暗模式之间切换的功能。 如果您曾经做过深夜编码或阅读，那么您就会知道，黑暗的主题对于防止眼睛疲劳和由此引起的头痛有多么惊人。 macOS最近实现了本机暗模式，但是该模式不会将网站转换为暗界面，因此无论本机主题如何，您仍然会获得明亮的网站。 如果网站还会根据用户的系统偏好而变暗还是变亮，这会令人惊讶吗？

The CSS working group agrees, which is why they've created a prefers-color-scheme media query; a media query that signals what the user's theme preference is and allows you to code your site to match that preference!

CSS工作组对此表示同意，这就是为什么他们创建了 prefers-color-scheme 媒体查询的原因 ； 一个媒体查询，该查询表明用户的主题首选项是什么，并允许您对网站进行编码以匹配该主题！

View Demo 观看演示

The prefers-color-scheme media query has two effective values you can specify: light and dark:

prefers-color-scheme媒体查询具有两个可以指定的有效值： light和dark ：

/* Light mode */
@media (prefers-color-scheme: light) {
    html {
        background: white;
        color: black;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    html {
        background: black;
        color: white;
    }
}

Coupled with your default site design, you could potentially offer three different designs: default (no-preference), light modifications, and dark modifications.

结合您的默认站点设计，您可能会提供三种不同的设计：默认( no-preference )，浅色修改和深色修改。

To make managing colors in each mode easier, you can simply modify CSS variables within the media query:

为了简化每种模式下的颜色管理，您只需在媒体查询中修改CSS变量即可：

/* Defaults */
:root {
    --color-scheme-background: pink;
    --color-scheme-text-color: red;
}

/* Light mode */
@media (prefers-color-scheme: light) {
    :root {
        --color-scheme-background: white;
        --color-scheme-text-color: black;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --color-scheme-background: black;
        --color-scheme-text-color: white;
    }
}

/* Usage */
html {
    background: var(--color-scheme-background);
    color: var(--color-scheme-text-color);
}

If you want to use JavaScript to know which mode your user prefers, you can easily do so by getting a CSS variable value:

如果您想使用JavaScript来了解用户喜欢哪种模式，则可以通过获取CSS变量值来轻松实现：

html {
    content: ""; /* (ab)using the content property */
}

/* Light mode */
@media (prefers-color-scheme: light) {
    html {
        content: "light"; /* (ab)using the content property */
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    html {
        content: "dark"; /* (ab)using the content property */
    }
}

const mode = getComputedStyle(document.documentElement).getPropertyValue('content');

// mode: "dark"

View Demo 观看演示

I'm pleased that there's an official media query for color/theme preference. As someone who suffers from minor headaches to skull numbing migraines, my preference is always a dark theme and I appreciate apps that put in the extra effort to provide me a painless user experience. We already use media queries to accommodate print and different viewport sizes, so let's take an extra step in providing colors based on user preference!

我很高兴有一个官方媒体查询颜色/主题首选项。 作为遭受轻微头痛，麻木偏头偏头痛的人，我的偏好始终是黑暗主题，并且我感谢那些为我提供无痛用户体验而付出了额外努力的应用。 我们已经使用媒体查询来适应打印和不同的视口大小，因此让我们采取额外的步骤根据用户的喜好提供颜色！

Note: At the time of posting, only Safari Preview 68 has implemented this media query. Follow Bugzilla bug 1494034 to know Firefox's support status.

注意：发布时，只有Safari Preview 68实施了此媒体查询。 跟随Bugzilla错误1494034来了解Firefox的支持状态。

翻译自: https://davidwalsh.name/prefers-color-scheme