Html 如何在CSS中实现主题

我目前正在使用变量跟踪浅色和深色主题的颜色，例如-浅色背景色，-深色背景色。这对于两个主题来说并不难，但似乎有点手工操作，如果面对更多的主题，它就变得不切实际了

---

我见过像夜班这样的应用CSS过滤器的东西，它可以反转网页上的颜色。这些过滤器是如何工作的？我该如何实现它们呢？

一种方法是使用一组通用的主题颜色变量，而不是像您在这里尝试的那样针对特定主题使用特定的颜色变量。 您可以在body元素中定义这些变量，并使用类或body的自定义属性覆盖它们

像通常对其他HTML元素一样使用这些变量，只需更改body元素的属性即可应用不同的主题

这里的重要部分是确保主题颜色变量也有相应的对比颜色变量，以便像深色背景上的白色文本这样的内容可以切换到白色背景上的深色文本

下面是一个示例，其中主主题和次主题以及对比度颜色在body元素中定义，并在body应用了dark类时被覆盖：

document.querySelectorbutton.addEventListener单击，=>document.body.classList.toggledark； 身体{ -原色：b4e9ce； -颜色主对比度：000000； -彩色二级：308d43； -颜色二次对比度：ffffff； /*其他主题颜色*/ } 身体黑{ -原色：202d26； -颜色主对比度：ffffff； -彩色二级：8F8F； -颜色二次对比度：000000； /*其他主题颜色*/ } 钮扣{ 填充：10px； 边缘底部：20px； } .包装纸{ 填充：20px； 背景色：var颜色原色； 边框：纯色辅色10px； } .包装纸h1{ 字体系列：无衬线； 文本对齐：居中； 颜色：var颜色主对比度； } 切换主题 你好，世界