aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--src/components/DarkMode.vue52
1 files changed, 45 insertions, 7 deletions
diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index a5aae41..80491fa 100644
--- a/src/components/DarkMode.vue
+++ b/src/components/DarkMode.vue
@@ -4,7 +4,11 @@
4 aria-label="Toggle dark mode" 4 aria-label="Toggle dark mode"
5 class="navbar-item is-inline-block-mobile" 5 class="navbar-item is-inline-block-mobile"
6 > 6 >
7 <i class="fas fa-fw fa-adjust"></i> 7 <i
8 :class="`${faClasses[mode]}`"
9 class="fa-fw"
10 :title="`${titles[mode]}`"
11 ></i>
8 </a> 12 </a>
9</template> 13</template>
10 14
@@ -14,21 +18,55 @@ export default {
14 data: function () { 18 data: function () {
15 return { 19 return {
16 isDark: null, 20 isDark: null,
21 faClasses: null,
22 titles: null,
23 mode: null,
17 }; 24 };
18 }, 25 },
19 created: function () { 26 created: function () {
20 this.isDark = 27 this.faClasses = ["fas fa-adjust", "fas fa-circle", "far fa-circle"];
21 "overrideDark" in localStorage 28 this.titles = ["Auto-switch", "Light theme", "Dark theme"];
22 ? JSON.parse(localStorage.overrideDark) 29 this.mode = 0;
23 : matchMedia("(prefers-color-scheme: dark)").matches; 30 if ("overrideDark" in localStorage) {
31 // Light theme is 1 and Dark theme is 2
32 this.mode = JSON.parse(localStorage.overrideDark) ? 2 : 1;
33 }
34 this.isDark = this.getIsDark();
24 this.$emit("updated", this.isDark); 35 this.$emit("updated", this.isDark);
25 }, 36 },
26 methods: { 37 methods: {
27 toggleTheme: function () { 38 toggleTheme: function () {
28 this.isDark = !this.isDark; 39 this.mode = (this.mode + 1) % 3;
29 localStorage.overrideDark = this.isDark; 40 switch (this.mode) {
41 // Default behavior
42 case 0:
43 localStorage.removeItem("overrideDark");
44 break;
45 // Force light theme
46 case 1:
47 localStorage.overrideDark = false;
48 break;
49 // Force dark theme
50 case 2:
51 localStorage.overrideDark = true;
52 break;
53 default:
54 // Should be unreachable
55 break;
56 }
57
58 this.isDark = this.getIsDark();
30 this.$emit("updated", this.isDark); 59 this.$emit("updated", this.isDark);
31 }, 60 },
61
62 getIsDark: function () {
63 const values = [
64 matchMedia("(prefers-color-scheme: dark)").matches,
65 false,
66 true,
67 ];
68 return values[this.mode];
69 },
32 }, 70 },
33}; 71};
34</script> 72</script>