aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/DarkMode.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/DarkMode.vue')
-rw-r--r--src/components/DarkMode.vue30
1 files changed, 19 insertions, 11 deletions
diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index 4c5ba03..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="`${faClasses[mode]}`" class="fa-fw" :title="`${titles[mode]}`"></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
@@ -21,7 +25,7 @@ export default {
21 }, 25 },
22 created: function () { 26 created: function () {
23 this.faClasses = ["fas fa-adjust", "fas fa-circle", "far fa-circle"]; 27 this.faClasses = ["fas fa-adjust", "fas fa-circle", "far fa-circle"];
24 this.titles = ["Auto-switch", "Light theme", "Dark theme"] 28 this.titles = ["Auto-switch", "Light theme", "Dark theme"];
25 this.mode = 0; 29 this.mode = 0;
26 if ("overrideDark" in localStorage) { 30 if ("overrideDark" in localStorage) {
27 // Light theme is 1 and Dark theme is 2 31 // Light theme is 1 and Dark theme is 2
@@ -32,33 +36,37 @@ export default {
32 }, 36 },
33 methods: { 37 methods: {
34 toggleTheme: function () { 38 toggleTheme: function () {
35 this.mode = (this.mode + 1) % 3 39 this.mode = (this.mode + 1) % 3;
36 switch(this.mode) { 40 switch (this.mode) {
37 // Default behavior 41 // Default behavior
38 case 0: 42 case 0:
39 localStorage.removeItem("overrideDark"); 43 localStorage.removeItem("overrideDark");
40 break 44 break;
41 // Force light theme 45 // Force light theme
42 case 1: 46 case 1:
43 localStorage.overrideDark = false; 47 localStorage.overrideDark = false;
44 break 48 break;
45 // Force dark theme 49 // Force dark theme
46 case 2: 50 case 2:
47 localStorage.overrideDark = true; 51 localStorage.overrideDark = true;
48 break 52 break;
49 default: 53 default:
50 // Should be unreachable 54 // Should be unreachable
51 break 55 break;
52 } 56 }
53 57
54 this.isDark = this.getIsDark(); 58 this.isDark = this.getIsDark();
55 this.$emit("updated", this.isDark); 59 this.$emit("updated", this.isDark);
56 }, 60 },
57 61
58 getIsDark: function() { 62 getIsDark: function () {
59 const values = [matchMedia("(prefers-color-scheme: dark)").matches, false, true]; 63 const values = [
64 matchMedia("(prefers-color-scheme: dark)").matches,
65 false,
66 true,
67 ];
60 return values[this.mode]; 68 return values[this.mode];
61 } 69 },
62 }, 70 },
63}; 71};
64</script> 72</script>