CSS `color-scheme` (提案)：控制表单元素和滚动条的深色模式

各位观众，欢迎来到今天的“CSS黑暗料理…啊不，黑暗模式”讲座！今天我们要聊的是一个CSS新贵，它能让你的表单和滚动条在黑暗模式下也能光彩照人（或者说，暗得有格调）。它就是——color-scheme。

开胃小菜：color-scheme 是什么？

简单来说，color-scheme 是一个CSS属性，它允许你告诉浏览器，你的页面支持哪些配色方案。通常，我们会关注两种方案：light（亮色）和 dark（暗色）。通过声明支持的配色方案，你可以让浏览器自动调整某些用户界面元素的样式，使其与用户的系统偏好相匹配。

想象一下，你的用户选择了系统的黑暗模式，但是你的表单元素和滚动条依然亮瞎眼，这体验…简直像是半夜吃了一口芥末。color-scheme 就是来解决这个问题的，它可以让这些“不听话”的元素自动适应黑暗模式，让你的网站看起来更和谐。

主菜登场：color-scheme 的语法

color-scheme 的语法相当简单，你可以把它应用在 <html> 元素上，也可以应用在任何其他元素上。常见的用法如下：

/* 声明支持亮色和暗色模式 */
:root {
  color-scheme: light dark;
}

/* 只声明支持亮色模式 */
:root {
  color-scheme: light;
}

/* 只声明支持暗色模式 */
:root {
  color-scheme: dark;
}

/* 声明不支持任何配色方案 */
:root {
  color-scheme: normal;
}

/* 从父元素继承配色方案 */
div {
  color-scheme: inherit;
}

light: 表示支持亮色模式。
dark: 表示支持暗色模式。
normal: 表示不支持任何配色方案。这是默认值，意味着浏览器不会对用户界面元素进行任何自动调整。
inherit: 从父元素继承 color-scheme 的值。
initial: 将 color-scheme 设置为浏览器的默认值（通常是 normal）。
unset: 取消设置该属性，如果该元素有继承的 color-scheme 值，则使用继承的值；否则，使用浏览器的默认值。

特别说明：:root 的妙用

通常，我们会将 color-scheme 应用在 :root 伪类选择器上。 :root 选择器代表文档的根元素，在HTML中，它始终是 <html> 元素。这样做的好处是，它可以影响整个页面的配色方案。

配菜一：meta 标签的辅助作用

除了CSS，你还可以使用 <meta> 标签来声明支持的配色方案。这对于一些不支持CSS的场景非常有用，例如在邮件客户端中。

<meta name="color-scheme" content="light dark">

这个 <meta> 标签的作用与在 :root 上设置 color-scheme 属性类似，它告诉浏览器，页面支持亮色和暗色模式。

配菜二：prefers-color-scheme 媒体查询

color-scheme 只是告诉浏览器你支持哪些配色方案，但如果你想根据用户的系统偏好来调整页面的其他样式，就需要用到 prefers-color-scheme 媒体查询。

/* 当用户选择暗色模式时 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}

/* 当用户选择亮色模式时 */
@media (prefers-color-scheme: light) {
  body {
    background-color: #fff;
    color: #000;
  }
}

这段代码会根据用户的系统偏好，自动切换页面的背景色和文字颜色。

硬菜上桌：color-scheme 的实际应用

现在，我们来看一些实际的例子，看看 color-scheme 在表单元素和滚动条上的应用。

1. 表单元素

默认情况下，浏览器会根据 color-scheme 的值，自动调整表单元素的样式，例如输入框、按钮、选择框等。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Scheme Demo</title>
  <style>
    :root {
      color-scheme: light dark;
    }

    body {
      font-family: sans-serif;
      padding: 20px;
    }

    label {
      display: block;
      margin-bottom: 5px;
    }

    input[type="text"],
    input[type="email"],
    textarea,
    select {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的宽度 */
    }

    button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    button:hover {
      background-color: #3e8e41;
    }

    @media (prefers-color-scheme: dark) {
      body {
        background-color: #121212; /* 深色背景 */
        color: #fff; /* 浅色文本 */
      }

      input[type="text"],
      input[type="email"],
      textarea,
      select {
        background-color: #333;
        color: #fff;
        border: 1px solid #666;
      }

      button {
        background-color: #3e8e41;
        color: #fff;
      }

      button:hover {
        background-color: #4CAF50;
      }
    }
  </style>
</head>
<body>

  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>

    <label for="country">Country:</label>
    <select id="country" name="country">
      <option value="usa">USA</option>
      <option value="canada">Canada</option>
      <option value="uk">UK</option>
    </select>

    <button type="submit">Submit</button>
  </form>

</body>
</html>

在这个例子中，我们设置了 :root { color-scheme: light dark; }，这意味着浏览器会自动调整表单元素的样式，使其在亮色模式下呈现默认样式，在暗色模式下呈现暗色样式。同时，我们使用 prefers-color-scheme 媒体查询来调整页面的背景色、文字颜色以及表单元素的颜色，以提供更好的用户体验。

2. 滚动条

color-scheme 也会影响滚动条的样式，使其与页面的配色方案相匹配。但是，需要注意的是，滚动条的样式受到操作系统和浏览器的影响，color-scheme 的效果可能不太明显。

/* 简单示例，实际效果可能因浏览器和操作系统而异 */
:root {
  color-scheme: light dark;
}

body {
  height: 200vh; /* 创建滚动条 */
}

/* 黑暗模式下的滚动条样式 (webkit内核浏览器) */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar {
    width: 8px; /* 滚动条宽度 */
  }

  ::-webkit-scrollbar-track {
    background: #222; /* 滚动条背景 */
  }

  ::-webkit-scrollbar-thumb {
    background: #555; /* 滚动条滑块 */
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #777;
  }
}

/* 亮色模式下的滚动条样式 (webkit内核浏览器) */
@media (prefers-color-scheme: light) {
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

在这个例子中，我们使用了 -webkit-scrollbar 相关的伪元素来自定义滚动条的样式。这些伪元素只在基于 WebKit 的浏览器（例如 Chrome 和 Safari）中有效。其他浏览器可能有不同的方式来自定义滚动条样式，或者根本不支持自定义滚动条样式。

更进一步：自定义表单元素样式

虽然 color-scheme 可以自动调整表单元素的样式，但在某些情况下，你可能需要更精细的控制。这时，你可以使用 prefers-color-scheme 媒体查询来自定义表单元素的样式。

/* 亮色模式下的输入框样式 */
input[type="text"],
input[type="email"],
textarea {
  background-color: #fff;
  color: #000;
  border: 1px solid #ccc;
}

/* 暗色模式下的输入框样式 */
@media (prefers-color-scheme: dark) {
  input[type="text"],
  input[type="email"],
  textarea {
    background-color: #333;
    color: #fff;
    border: 1px solid #666;
  }
}

这段代码会根据用户的系统偏好，自动切换输入框的背景色、文字颜色和边框颜色。

兼容性问题

color-scheme 的兼容性还算不错，主流浏览器都支持它。但是，为了确保你的网站在所有浏览器上都能正常工作，你可能需要提供一些额外的样式。

浏览器	支持情况
Chrome	支持
Firefox	支持
Safari	支持
Edge	支持
Opera	支持
Internet Explorer	不支持

对于不支持 color-scheme 的浏览器，你可以使用 prefers-color-scheme 媒体查询来提供默认的样式。

注意事项

color-scheme 主要影响用户界面元素的样式，例如表单元素和滚动条。它不会自动改变页面的背景色或文字颜色。
要改变页面的背景色和文字颜色，你需要使用 prefers-color-scheme 媒体查询。
滚动条的样式受到操作系统和浏览器的影响，color-scheme 的效果可能不太明显。
在自定义表单元素样式时，要考虑到可访问性，确保文字颜色和背景色之间有足够的对比度。

总结

color-scheme 是一个非常有用的CSS属性，它可以让你轻松地为你的网站添加黑暗模式支持。通过声明支持的配色方案，你可以让浏览器自动调整用户界面元素的样式，使其与用户的系统偏好相匹配。同时，你还可以使用 prefers-color-scheme 媒体查询来进一步自定义页面的样式，提供更好的用户体验。

最后的甜点：forced-colors 媒体查询

除了 prefers-color-scheme，还有一个相关的媒体查询叫做 forced-colors。 forced-colors 用于检测用户是否启用了强制颜色模式，例如Windows的高对比度模式。在这种模式下，用户可以自定义所有元素的颜色，包括背景色、文字颜色和链接颜色。

@media (forced-colors: active) {
  /* 在强制颜色模式下应用的样式 */
  body {
    background-color: Canvas; /* 系统定义的背景色 */
    color: CanvasText; /* 系统定义的文字颜色 */
  }

  a {
    color: LinkText; /* 系统定义的链接颜色 */
  }
}

在这个例子中，我们使用了 Canvas、CanvasText 和 LinkText 这些系统颜色关键字。这些关键字会告诉浏览器使用用户在操作系统中设置的颜色。

forced-colors 对于提高网站的可访问性非常重要，它可以确保你的网站在所有情况下都能正常工作，即使是在用户启用了强制颜色模式的情况下。

希望今天的讲座能让你对 color-scheme 和黑暗模式有更深入的了解。现在，你可以开始尝试在你的网站上应用这些技术，让你的网站在黑暗中也能闪耀光芒！下课！

发表回复 取消回复

发表回复取消回复