甚至品牌推广也可以自适应。 您可以调整网站的呈现方式，以符合用户的偏好设置。 不过，首先我们来了解一下如何扩展网站的品牌推广范围，将浏览器本身也纳入其中。
自定义浏览器界面
某些浏览器允许您根据网站的调色板建议主题颜色。
浏览器界面会根据您建议的颜色进行调整。在网页的 head 中，添加一个名为 theme-color 的 meta 元素，并在其中添加颜色。
<meta name="theme-color" content="#00D494">
您可以使用 JavaScript 更新 theme-color 的值。但请明智地使用此功能。
如果浏览器的配色方案过于频繁地发生变化，用户可能会感到不知所措。
考虑以细微的方式调整主题颜色。如果更改过于突兀，用户会因感到不适而离开。
您还可以在 Web 应用清单文件中指定主题颜色。这是一个包含您网站元数据的 JSON 文件。
指向文档 head 的清单文件的链接。使用 link 元素，其 rel 值为 manifest。
<link rel="manifest" href="/manifest.json">
在清单文件中，使用键值对列出您的元数据。
{
"short_name": "Clearleft",
"name": "Clearleft design agency",
"start_url": "/",
"background_color": "#00D494",
"theme_color": "#00D494",
"display": "standalone"
}
如果访问者决定将您的网站添加到其主屏幕，浏览器将使用清单文件中的信息来显示相应的快捷方式。
提供深色模式
许多操作系统都允许用户指定浅色或深色调色板偏好设置，因此最好根据用户的主题偏好设置优化您的网站。
您可以在名为 prefers-color-scheme 的媒体功能中访问此偏好设置。
@media (prefers-color-scheme: dark) {
// Styles for a dark theme.
}
使用 meta 元素中的 prefers-color-scheme 媒体功能指定主题颜色。
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
您还可以在 SVG 中使用 prefers-color-scheme 媒体功能。
如果您使用 SVG 文件作为网站图标，则可以针对深色模式进行调整。
Thomas Steiner 撰写了关于深色模式图标的 SVG 网站图标中的 prefers-color-scheme 的文章。
使用自定义属性设置主题
如果您在整个 CSS 中多次使用相同的颜色值，那么在 prefers-color-scheme 媒体查询中重复所有选择器可能会非常繁琐。
body {
background-color: white;
color: black;
}
input {
background-color: white;
color: black;
border-color: black;
}
button {
background-color: black;
color: white;
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
input {
background-color: black;
color: white;
border-color: white;
}
button {
background-color: white;
color: black;
}
}
使用 CSS 自定义属性存储颜色值。 自定义属性的工作方式与编程语言中的变量类似。您可以更新变量的值，而无需更新其名称。
如果您在 prefers-color-scheme 媒体查询中更新自定义属性的值，则无需将所有选择器都写两次。
html {
--page-color: white;
--ink-color: black;
}
@media (prefers-color-scheme: dark) {
html {
--page-color: black;
--ink-color: white;
}
}
body {
background-color: var(--page-color);
color: var(--ink-color);
}
input {
background-color: var(--page-color);
color: var(--ink-color);
border-color: var(--ink-color);
}
button {
background-color: var(--ink-color);
color: var(--page-color);
}
如需查看有关使用自定义属性设置主题的更高级示例，请参阅构建配色方案。
图片
如果您在 HTML 中使用 SVG，也可以在其中应用自定义属性。
svg {
stroke: var(--ink-color);
fill: var(--page-color);
}
现在，图标的颜色会随页面上的其他元素一起变化。
如果您想在深色模式下显示照片时调低照片的亮度，可以在 CSS 中应用滤镜。
@media (prefers-color-scheme: dark) {
img {
filter: brightness(.8) contrast(1.2);
}
}
对于某些图片，您可能希望在深色模式下完全替换它们。例如，您可能希望显示采用较深配色方案的地图。
使用包含 <source> 元素（带有 prefers-color-scheme 媒体查询）的 <picture> 元素。
<picture>
<source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
<img src="lightimage.png" alt="A description of the image.">
</picture>
表单
浏览器为表单字段提供默认调色板。 让浏览器知道您的网站同时提供深色模式和浅色模式。 这样，浏览器就可以为表单提供适当的默认样式。
将以下内容添加到您的 CSS 中：
html {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
您还可以使用 HTML。在文档的 head 中添加以下内容：
<meta name="supported-color-schemes" content="light dark">
您可以使用 CSS 中的 accent-color 属性来设置复选框、单选按钮和一些其他表单字段的样式。
html {
accent-color: red;
}
深色主题通常会采用柔和的品牌颜色。您可以更新深色模式的 accent-color 值。
html {
accent-color: red;
}
@media (prefers-color-scheme: dark) {
html {
accent-color: pink;
}
}
为此使用自定义属性是有意义的，这样您就可以将所有颜色声明放在一个位置。
html {
color-scheme: light;
--page-color: white;
--ink-color: black;
--highlight-color: red;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
--page-color: black;
--ink-color: white;
--highlight-color: pink;
}
}
html {
accent-color: var(--highlight-color);
}
body {
background-color: var(--page-color);
color: var(--ink-color);
}
提供深色模式只是根据用户偏好调整网站的一个示例。 接下来，您将了解如何使网站适应各种无障碍考虑因素。
检查掌握情况
测试您对主题设置的了解程度
如需提供影响网页外部浏览器的主题颜色，请使用：
<meta> 标记时。manifest.json，其中包含用于指定主题颜色的字段，以用于着色从移动设备主屏幕打开的应用的外观。<meta> 标记<head> 标记中的主题颜色，从而避免出现不必要的颜色闪烁。如需挂钩到用户关于浅色或深色主题的系统偏好设置，请使用：
(prefers-color-scheme) 媒体查询因此，您支持深色主题，但所有表单输入仍采用浅色主题。你能做些什么？
html { color-scheme: light dark; } 添加到 CSS 中。<meta name="supported-color-schemes" content="light dark"> 添加到 HTML <head> 标记中。