Question

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

Answer 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
}

根据暗或亮模式更改样式

1 个答案: