You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
803 B
40 lines
803 B
3 years ago
|
export default {
|
||
|
|
||
|
data() {
|
||
|
return {
|
||
|
system: (window.matchMedia("(prefers-color-scheme: dark)")) ? "dark" : "light",
|
||
|
userTheme: localStorage.theme,
|
||
|
};
|
||
|
},
|
||
|
|
||
|
mounted() {
|
||
|
// Default Light
|
||
|
if (! this.userTheme) {
|
||
|
this.userTheme = "light";
|
||
|
}
|
||
|
|
||
|
document.body.classList.add(this.theme);
|
||
|
},
|
||
|
|
||
|
computed: {
|
||
|
theme() {
|
||
|
if (this.userTheme === "auto") {
|
||
|
return this.system;
|
||
|
}
|
||
|
return this.userTheme;
|
||
|
}
|
||
|
},
|
||
|
|
||
|
watch: {
|
||
|
userTheme(to, from) {
|
||
|
localStorage.theme = to;
|
||
|
},
|
||
|
|
||
|
theme(to, from) {
|
||
|
document.body.classList.remove(from);
|
||
|
document.body.classList.add(this.theme);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|