根据深色或浅色模式更改样式答案

【问题标题】：Change styles based on dark or light mode根据深色或浅色模式更改样式
【发布时间】：2020-04-07 11:52:57
【问题描述】：

我想在我的 Vue 应用程序上使用深色和浅色主题。我可以创建dark.scss 文件并更改类样式并使用!important 属性来覆盖组件中定义的样式。或者我可以在我的组件中使用props，并根据主题将className 更改为v-if。例如当主题很轻时将类设置为className__light，否则设置为className__dark。在所有情况下，例如性能或所需时间，哪一个更好？

【问题讨论】：

我在我的应用程序（Angular，但应该基本相同）中通过更改附加到 body 标记的类来执行此操作。然后我为每个主题“dark.scss”和“light.scss”有两个文件，在每个文件的开头我有body.lightTheme {... 或body.darkTheme {...。我有一个选择，当我选择一个特定的主题时，我正在用新的类替换页面的body 中的当前类。我希望这对你有所帮助:-)
@decebal 正如我在问题中所说的，这是我的一种方法，但我必须将!important 设置为dark.scss 中的样式，因为我的灯光样式是在组件中定义的，并且它们的范围如此如果我不设置!important，dark.scss 中的样式将不起作用，因为首选范围样式。
对不起，我错过了。我在主题文件中设置了所有规则，这样我就可以更改 body 类并更新所有内容。这对我来说是最简单和干净的解决方案。我使用 Angular Material（类似于 Vuetify - 如果您正在使用它）并且我将所有样式设置为每个主题的通用样式，因为例如我希望提交按钮在整个应用程序上看起来相同。但无论如何，这主要取决于你想用你的应用程序实现什么。祝你好运！

标签： javascript css vue.js themes

【解决方案1】：

好吧，我不会在课堂上这样做。我会使用 SCSS 创建 CSS 变量，或者您在 :root 中创建 CSS 变量

如果你使用:root 方法，那么它应该看起来像这样：

:root {
   --background: red;
}

然后您可以在任何组件中访问它，例如：

.class {
   background: var(--background); // the background will appear red
}

现在您只需 1 个 CSS 变量即可更改背景颜色。

要使用 Javascript 更改变量，您只需编写以下代码：

 root.style.setProperty('--background', "green");

这里的问题是，如果您关心浏览器支持，IE 不支持它。所以你应该像这样创建一个后备：

.class {
   background: red; //fallback
   background: var(--background); // the background will appear red
}

【讨论】：

所以认为我必须使用在root 中定义的background 的颜色进行div，并且在暗模式下它们的颜色不同。更改background 值会影响两者，我该怎么办？
你什么意思我不明白你
我设置变量background 例如红色，我有两个div 和这个变量的background-color。在黑暗模式下，div_1 有background-color 绿色，而 div_2 有蓝色，因此将变量background 更改为绿色将改变两个我不想要的 div 的background-color。
声明更多变量...比如--background-one: red; --background-two: blue;
所以你说这种方法更好，我的第一种方法是使用dark.scss 文件并将!important 设置为它们？