Vue JS : 如何从 vue 组件访问和更改 Css 根变量以切换 CSS 变量站点主题?

Question

我想在 Vue 组件中访问项目中 css 根变量的值。例如，更改 10 个变量，包括颜色、边距和字体大小，方法是按一个按钮到新值，然后按相同的按钮将变量更改为其(默认(原始值，实际上是更改项目中 css 根变量的值。我该怎么做？事实上，我想通过按下按钮在黑暗和光明之间切换。

这个想法的灵感来自下面链接中的更改。 链接内的示例是用纯JavaScript脚本编写的，我想在Next Js Framework上开发的Vue项目中使用它。实现具有大约 10 个变量的网站，其值必须立即更改，按下按钮以在深色/浅色模式下切换。

启发我的代码笔链接:)

如何访问和更改 Css 根变量？

new Vue({
	el: "#theme",
	data: {
return {
dark: true,

};
},

watch: {
dark() {

let bg = this.dark ? "#1b1b1b" : "#f5f5f5";
let txtColor = this.dark ? "#999999" : "#333333";

document.documentElement.style.setProperty("--bg", bg);
document.documentElement.style.setProperty("--txt", txtColor);

}
}
});

:root{
--bg: white;
--txt: black;
}
body {
background-color: var(--bg);
color: var(--txt)
}
article {
padding: 50px
}
article h2 {
margin-top: 100px;
}

<div id="theme">
<button @click="dark=!dark">dark</button>
<article>
<h1>Hello World</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean v
</article>
</div>

Answer 1

您在示例中data有一个语法错误，但除此之外它工作正常。是否要在页面加载后立即运行？

new Vue({
el: "#theme",
data() {
return {
dark: false,
root: null
};
},
mounted: function() {
this.root = document.documentElement;
},
watch: {
dark: {
handler: function() {
// because we are using this handler immideatly we need to wait for data changes using nextTick.
this.$nextTick(() => {
if (this.dark) {
this.root.style.setProperty("--bg", "red");
this.root.style.setProperty("--text", "black");
this.root.style.setProperty("--padding", "10px");
this.root.style.setProperty("--font", "1rem");
} else {
this.root.style.setProperty("--bg", "blue");
this.root.style.setProperty("--text", "green");
this.root.style.setProperty("--padding", "15px");
this.root.style.setProperty("--font", "2rem");
}
})
},
immediate: true
}
}
});

:root {
--bg: white;
--bg-text: black;
--padding: 5px;
--font: 3rem;
}
body {
background-color: var(--bg);
color: var(--bg-text)
}
article {
padding: 50px
}
article h2 {
margin-top: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="theme">
<button @click="dark=!dark">dark</button>
<article>
<h1>Hello World</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean v
</article>
</div>