admin管理员组文章数量:1342534
I want to access the values of css root variables in the project in a Vue ponent. For example, change the 10 variables, including the color, margin, and font size, by pressing a button to the new values, and then pressing the same button to change the variables to their ( default ) original values, in fact changing the values of the css root variables in the project. How can I do this ? In fact, I want to switch between dark and light by pressing a button.
This idea is inspired by the changes from the link below. The example inside the link is written in the pure JavaScript script, and I want to use it in the Vue project that develope on Next Js Framework . To implement a website with about 10 variables whose values must change immediately with pressing a button to toggling in the dark / light mode.
The codepen link that inspired me :)
How can I access and change Css root variables?
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 modo 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>I want to access the values of css root variables in the project in a Vue ponent. For example, change the 10 variables, including the color, margin, and font size, by pressing a button to the new values, and then pressing the same button to change the variables to their ( default ) original values, in fact changing the values of the css root variables in the project. How can I do this ? In fact, I want to switch between dark and light by pressing a button.
This idea is inspired by the changes from the link below. The example inside the link is written in the pure JavaScript script, and I want to use it in the Vue project that develope on Next Js Framework . To implement a website with about 10 variables whose values must change immediately with pressing a button to toggling in the dark / light mode.
The codepen link that inspired me :)
How can I access and change Css root variables?
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 modo 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>1 Answer
Reset to default 10You have a syntax error at data in your example but aside from that it works OK. Did you want to run as soon as the page loads?
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./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 modo 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>本文标签：
版权声明：本文标题：javascript - Vue JS : How can I access and change Css root variables from vue component to toggle CSS Variables Site Theming? - 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743699837a2524129.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论