CSS `color-scheme` `light` / `dark` `root-only` 行为与组件适配

各位观众，早上好！今天咱们来聊聊CSS color-scheme 属性，特别是 light / dark root-only 这几个关键字，以及如何让你的组件更好地适应用户的浅色/深色模式偏好。这玩意儿听起来有点玄乎，但其实只要掌握了窍门，就能让你的网站在各种环境下都表现得棒棒哒。

一、color-scheme 属性是个啥？

简单来说，color-scheme 属性就是告诉浏览器，你的网站支持哪些配色方案。它可以接受多个值，比如 light、dark，甚至还可以接受自定义的值。

:root {
  color-scheme: light dark;
}

这行代码的意思是，这个网站支持浅色和深色两种配色方案。浏览器会根据用户的系统偏好，自动选择合适的配色方案。

二、root-only 是个什么妖孽？

root-only 关键字就比较特殊了。它告诉浏览器，这个配色方案只应该应用于根元素（通常是 <html> 元素）。这意味着，只有根元素的背景色和文本颜色会受到配色方案的影响，其他元素的颜色则不会。

:root {
  color-scheme: light dark root-only;
}

你可能会问，这有什么用呢？别急，咱们慢慢道来。

三、root-only 的应用场景

root-only 最大的用处在于，它可以让你更好地控制网站的整体配色，同时又不会影响到组件的样式。

想象一下，你有一个复杂的组件库，里面包含了各种各样的按钮、表单、对话框等等。这些组件都有自己的样式，而且你希望它们在浅色和深色模式下都能正常工作。

如果你不使用 root-only，那么浏览器可能会根据配色方案，自动修改这些组件的颜色。这可能会导致组件的样式变得混乱，甚至出现一些意想不到的问题。

但是，如果你使用了 root-only，那么浏览器就只会修改根元素的颜色，而不会影响到组件的样式。这样，你就可以通过其他方式，来控制组件在浅色和深色模式下的表现。

四、组件适配：怎么让组件在浅色和深色模式下都好看？

既然 root-only 限制了全局样式对组件的影响，那我们该如何让组件优雅地切换配色呢？这里有几种常用的方法：

1. CSS 变量（又名：自定义属性）

CSS 变量是解决这个问题的利器。你可以定义一些 CSS 变量来表示颜色值，然后在组件中使用这些变量。

:root {
  --bg-color: #fff; /* 浅色模式下的背景色 */
  --text-color: #000; /* 浅色模式下的文本颜色 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #000; /* 深色模式下的背景色 */
    --text-color: #fff; /* 深色模式下的文本颜色 */
  }
}

.my-component {
  background-color: var(--bg-color);
  color: var(--text-color);
}

在这个例子中，我们定义了两个 CSS 变量：--bg-color 和 --text-color。在浅色模式下，它们的值分别是白色和黑色；在深色模式下，它们的值分别是黑色和白色。

然后，我们在 .my-component 中使用了这些变量。这样，当用户切换配色方案时，.my-component 的背景色和文本颜色会自动更新。

2. prefers-color-scheme 媒体查询

prefers-color-scheme 是一个媒体查询，它可以检测用户是否选择了浅色或深色模式。你可以使用它来定义不同的样式，以适应不同的配色方案。

.my-component {
  background-color: #fff; /* 浅色模式下的背景色 */
  color: #000; /* 浅色模式下的文本颜色 */
}

@media (prefers-color-scheme: dark) {
  .my-component {
    background-color: #000; /* 深色模式下的背景色 */
    color: #fff; /* 深色模式下的文本颜色 */
  }
}

在这个例子中，我们使用了 prefers-color-scheme: dark 媒体查询，来定义深色模式下的样式。当用户选择了深色模式时，.my-component 的背景色和文本颜色会变为黑色和白色。

3. BEM（Block Element Modifier）命名规范 + CSS 变量

BEM 是一种流行的 CSS 命名规范，它可以帮助你更好地组织和管理你的 CSS 代码。结合 CSS 变量，你可以轻松地创建可维护且可扩展的浅色/深色模式组件。

<div class="button button--primary">
  Click me
</div>

:root {
  --button-primary-bg-color: #007bff; /* 浅色模式下的背景色 */
  --button-primary-text-color: #fff; /* 浅色模式下的文本颜色 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --button-primary-bg-color: #0056b3; /* 深色模式下的背景色 */
    --button-primary-text-color: #fff; /* 深色模式下的文本颜色 */
  }
}

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button--primary {
  background-color: var(--button-primary-bg-color);
  color: var(--button-primary-text-color);
}

在这个例子中，.button 定义了按钮的基本样式，.button--primary 定义了主要按钮的样式。通过 CSS 变量，我们可以轻松地修改主要按钮在浅色和深色模式下的颜色。

4. JavaScript 的辅助

虽然 CSS 已经足够强大了，但在某些情况下，你可能需要使用 JavaScript 来辅助实现浅色/深色模式的切换。

比如，你可能需要根据用户的选择，手动切换 CSS 类的添加和删除。或者，你可能需要使用 JavaScript 来动态修改 CSS 变量的值。

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

themeToggle.addEventListener('click', () => {
  if (body.classList.contains('dark-theme')) {
    body.classList.remove('dark-theme');
    localStorage.setItem('theme', 'light');
  } else {
    body.classList.add('dark-theme');
    localStorage.setItem('theme', 'dark');
  }
});

// 页面加载时，根据 localStorage 中的主题设置应用主题
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
  body.classList.add('dark-theme');
}

:root {
  --bg-color: #fff;
  --text-color: #000;
}

body.dark-theme {
  --bg-color: #000;
  --text-color: #fff;
}

.my-component {
  background-color: var(--bg-color);
  color: var(--text-color);
}

在这个例子中，我们使用 JavaScript 来监听主题切换按钮的点击事件。当用户点击按钮时，我们会切换 body 元素的 dark-theme 类，并更新 localStorage 中的主题设置。

然后，我们在 CSS 中定义了 body.dark-theme 的样式，用于覆盖默认的 CSS 变量值。

五、一些最佳实践

语义化命名： 无论是 CSS 类名还是 CSS 变量名，都要尽可能地语义化。这样可以提高代码的可读性和可维护性。例如，--button-primary-bg-color 比 --color1 更好。
可访问性： 确保你的网站在浅色和深色模式下都具有良好的可访问性。这意味着，文本和背景色之间的对比度要足够高，以便让所有用户都能轻松阅读。可以使用在线工具检查对比度，比如WebAIM Contrast Checker。
测试： 在不同的设备和浏览器上测试你的网站，以确保它在各种环境下都能正常工作。尤其是移动端设备，不同厂商可能对浅色/深色模式的实现有所差异。
逐步增强： 如果你的网站已经存在，不要试图一次性地完全支持浅色/深色模式。可以逐步地进行改进，先从一些简单的组件开始，然后再逐渐扩展到整个网站。
考虑色盲用户： 不同的色盲类型会导致用户对颜色的感知不同。尽量避免使用仅仅依靠颜色来传递信息的做法。可以考虑使用纹理、图案或者额外的文字提示来辅助信息传递。
避免硬编码颜色值： 尽量使用 CSS 变量来管理颜色值，方便统一修改和维护。如果必须使用硬编码颜色值，也要确保在浅色和深色模式下都有良好的对比度。
提供主题切换选项： 虽然浏览器会根据用户的系统偏好自动选择配色方案，但最好还是提供一个手动切换主题的选项，让用户可以根据自己的喜好来选择。

六、示例代码：一个简单的对话框组件

下面是一个简单的对话框组件的示例代码，它使用了 CSS 变量和 prefers-color-scheme 媒体查询来支持浅色和深色模式。

<div class="dialog">
  <div class="dialog__header">
    <h2 class="dialog__title">Alert!</h2>
  </div>
  <div class="dialog__body">
    <p>This is a sample dialog.</p>
  </div>
  <div class="dialog__footer">
    <button class="button button--primary">OK</button>
    <button class="button">Cancel</button>
  </div>
</div>

:root {
  --dialog-bg-color: #fff;
  --dialog-text-color: #000;
  --dialog-border-color: #ccc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --dialog-bg-color: #333;
    --dialog-text-color: #fff;
    --dialog-border-color: #666;
  }
}

.dialog {
  background-color: var(--dialog-bg-color);
  color: var(--dialog-text-color);
  border: 1px solid var(--dialog-border-color);
  border-radius: 5px;
  padding: 20px;
  width: 300px;
  margin: 20px auto;
}

.dialog__header {
  margin-bottom: 10px;
}

.dialog__title {
  font-size: 20px;
  font-weight: bold;
}

.dialog__body {
  margin-bottom: 10px;
}

.dialog__footer {
  text-align: right;
}

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}

.button--primary {
  background-color: #007bff;
  color: #fff;
}

这个例子展示了如何使用 CSS 变量和 prefers-color-scheme 媒体查询来创建一个简单的、支持浅色和深色模式的对话框组件。你可以根据自己的需求，修改和扩展这个示例代码。

七、表格总结

技术点	描述	优势	劣势	适用场景
`color-scheme`	定义网站支持的配色方案。 `root-only` 限制配色方案只应用于根元素。	控制整体配色，避免影响组件样式。	需要配合其他技术才能实现组件的浅色/深色模式切换。	适用于需要精细控制网站配色，同时又不想影响组件样式的场景。
CSS 变量	定义可复用的颜色值。	易于维护和修改，方便统一管理颜色值。	需要一定的 CSS 知识。	适用于需要频繁修改颜色值的场景，例如主题切换、品牌色调整等。
`prefers-color-scheme`	检测用户是否选择了浅色或深色模式。	可以根据用户的偏好，自动应用不同的样式。	需要浏览器支持。	适用于需要根据用户的系统偏好，自动切换浅色/深色模式的场景。
BEM	一种 CSS 命名规范，用于提高 CSS 代码的可读性和可维护性。	结构清晰，易于理解和维护，方便团队协作。	需要一定的学习成本。	适用于大型项目，需要多人协作，并且对代码质量有较高要求的场景。
JavaScript	辅助实现浅色/深色模式的切换。	可以实现更复杂的交互逻辑，例如手动切换主题、动态修改 CSS 变量等。	需要一定的 JavaScript 知识，可能会增加代码的复杂性。	适用于需要实现更复杂的交互逻辑，或者需要兼容不支持 `prefers-color-scheme` 的浏览器的场景。

八、总结

好了，今天的讲座就到这里。希望通过今天的讲解，大家能够更好地理解 CSS color-scheme 属性，以及如何让你的组件更好地适应用户的浅色/深色模式偏好。记住，让你的网站在各种环境下都表现得棒棒哒，是每个前端工程师的责任和义务！

最后，祝大家编码愉快！

发表回复 取消回复

发表回复取消回复