1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
<template>
<a
@click="toggleTheme()"
aria-label="Toggle dark mode"
class="navbar-item is-inline-block-mobile"
>
<i
:class="`${faClasses[mode]}`"
class="fa-fw"
:title="`${titles[mode]}`"
></i>
</a>
</template>
<script>
export default {
name: "Darkmode",
props: {
defaultValue: String,
},
data: function () {
return {
isDark: null,
faClasses: null,
titles: null,
mode: null,
};
},
created: function () {
this.faClasses = ["fas fa-adjust", "fas fa-circle", "far fa-circle"];
this.titles = ["Auto-switch", "Light theme", "Dark theme"];
this.mode = 0;
if ("overrideDark" in localStorage) {
// Light theme is 1 and Dark theme is 2
this.mode = JSON.parse(localStorage.overrideDark) ? 2 : 1;
} else {
switch (this.defaultValue) {
case "light":
this.mode = 1;
break;
case "dark":
this.mode = 2;
break;
default:
this.mode = 0;
}
}
this.isDark = this.getIsDark();
this.$emit("updated", this.isDark);
this.watchIsDark();
},
methods: {
toggleTheme: function () {
this.mode = (this.mode + 1) % 3;
switch (this.mode) {
// Default behavior
case 0:
localStorage.removeItem("overrideDark");
break;
// Force light theme
case 1:
localStorage.overrideDark = false;
break;
// Force dark theme
case 2:
localStorage.overrideDark = true;
break;
default:
// Should be unreachable
break;
}
this.isDark = this.getIsDark();
this.$emit("updated", this.isDark);
},
getIsDark: function () {
const values = [
matchMedia("(prefers-color-scheme: dark)").matches,
false,
true,
];
return values[this.mode];
},
watchIsDark: function () {
matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
this.isDark = this.getIsDark();
this.$emit("updated", this.isDark);
});
},
},
};
</script>
|
