css - 通过首选项或应用设置属性启用暗模式

Question

我正在构建一个具有深色和浅色主题的 web 应用程序。我想根据用户的操作系统/浏览器偏好提供服务。但是，在我的 webapp 中，它们将是一个覆盖它的设置。因此，假设用户根据他的操作系统/浏览器偏好暗模式，那么他仍然可以选择使用亮模式。我最初的想法是当用户选择此模式时，使用 JS 在 body-tag 上设置数据属性。

我正在为我的配色方案使用 CSS 变量。现在，问题是：我可以将它组合到一种查询中，而无需编写重复的代码吗？我当前使用重复代码的实现简化如下：

:root {
  --background: white;
  --text: black;
}

body[data-theme='dark'] {
  --background: black;
  --text: white;
}

@media (prefers-color-scheme: dark) {
  body:not[data-theme='light'] {
    --background: black;
    --text: white;
  }
}

所以：

• 默认我提供轻主题
• 当你的浏览器/操作系统说你喜欢黑暗时，你会变黑
• 当您在 web 应用程序中选择亮或暗时，它将覆盖您的浏览器/操作系统首选项

这里的问题当然是我有重复的代码来设置黑暗主题变量。是否有任何 CSS 方法来解决这个问题（所以没有 SCSS/Less 等）？

标签： cssthemes