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

Question

我正在构建一个具有深色和浅色主题的webapp。我想根据用户的OS /浏览器首选项来提供服务。但是，在我的webapp中，它们将是覆盖它的设置。因此，假设用户根据其OS /浏览器具有暗模式首选项，那么他仍然可以选择使用亮模式。我最初的想法是，当用户选择此模式时，使用JS在body标签上设置数据属性。

我将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;
  }
}

所以：

• 默认情况下，我提供一个浅色主题
• 当浏览器/操作系统显示您更喜欢黑暗时，您会变得黑暗
• 当您在网络应用中选择亮或暗时，它将覆盖您的浏览器/操作系统首选项

这里的问题当然是我有重复的代码来设置深色主题变量。有没有解决此问题的CSS方法（因此没有SCSS / Less等）？