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

Question

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

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

Change styles based on dark or light mode

javascript

css

themes

vue.js