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

Question

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

Answer 1

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

如果您使用该: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

}