Html 如何通过CSS更改web应用程序的颜色主题？

我希望我的web应用程序的主题根据设置自动更改

目前，我正在使用jQuery这样做：

if (background == 'dark') {
  $('#graph-container').addClass('graph-dark');
  $('#analyticsbutton').addClass('analyticsbutton-dark');
}

---

但是，我想知道最好的做法是否是使用修改过的类创建另一个CSS文件，并根据

后台

参数加载它？

最简单的方法是使用

：root

选择器和自定义CSS变量。

：root

选择器允许您以DOM或文档树中最高级别的“父”元素为目标

然后，您可以简单地动态添加一个

.dark

类来更改主题

：根目录{
--浅色文字颜色：黑色；
--浅背景色：白色；
--深色文字颜色：白色；
--深色背景色：黑色；
}
div{
宽度：300px；
高度：100px；
边缘底部：10px；
}
div{
颜色：var（--浅文本颜色）；
背景：var（--浅背景色）；
边框：1px纯黑；
}
：root.dark{
颜色：var（--深色文本颜色）；
背景：var（--深背景色）；
}

灯光主题
黑暗主题

少用/SASS。在CSS中，只需添加父类依赖项您是否需要一个可能使用jQuery的解决方案？@Code\u Ninja也可以不使用jQuery，甚至完全不使用…好的，因为我无法想象这将如何根据设置自动更改该Web应用程序的主题。这不太好，因为我的一些元素有不同的背景色设置，因此，我无法在一个

：root-dark

中设置它们，或者有没有一种方法可以在不复制我已有的代码的情况下区分其中的元素？根据您的指导，我找到了一种更好的方法，建议您在

：root

和

：root[theme='dark']中设置变量

然后使用Javascript@metteur使用

theme

参数简单地切换主题如果使用这种方法，仍然将使用jquery/Javascript。