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

Question

我想在我的 Vue 应用程序上有一个深色和浅色主题。 我可以创建 dark.scss 文件并更改类样式，并使用 !important 属性来覆盖组件中定义的样式。 或者我可以在组件中使用 props 并根据主题使用 v-if 更改 className。 例如当主题为 light 时，将 class 设置为 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
}