aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/DarkMode.vue
diff options
context:
space:
mode:
authorGaëtan Caillaut <gcaillaut@protonmail.com>2021-03-06 15:12:22 +0100
committerGaëtan Caillaut <gcaillaut@protonmail.com>2021-03-09 18:32:38 +0100
commit4a1e8717e90d1b0b516da2cbc1d16ff906d7fbdf (patch)
tree623bf8163ecc565718d9c7a7c868f99ab3126e16 /src/components/DarkMode.vue
parent66eace9e95d1962b437154b95e8f206d0da658ec (diff)
downloadhomer-4a1e8717e90d1b0b516da2cbc1d16ff906d7fbdf.tar.gz
homer-4a1e8717e90d1b0b516da2cbc1d16ff906d7fbdf.tar.zst
homer-4a1e8717e90d1b0b516da2cbc1d16ff906d7fbdf.zip
cycle between automatic-light-dark themes
Diffstat (limited to 'src/components/DarkMode.vue')
-rw-r--r--src/components/DarkMode.vue42
1 files changed, 35 insertions, 7 deletions
diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index a5aae41..02450d9 100644
--- a/src/components/DarkMode.vue
+++ b/src/components/DarkMode.vue
@@ -4,7 +4,7 @@
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 :class="`${faClasses[mode]}`" class="fa-fw"></i>
8 </a> 8 </a>
9</template> 9</template>
10 10
@@ -14,21 +14,49 @@ export default {
14 data: function () { 14 data: function () {
15 return { 15 return {
16 isDark: null, 16 isDark: null,
17 faClasses: null,
18 mode: null,
17 }; 19 };
18 }, 20 },
19 created: function () { 21 created: function () {
20 this.isDark = 22 this.faClasses = ["fas fa-adjust", "fas fa-circle", "far fa-circle"];
21 "overrideDark" in localStorage 23 this.mode = 0;
22 ? JSON.parse(localStorage.overrideDark) 24 if ("overrideDark" in localStorage) {
23 : matchMedia("(prefers-color-scheme: dark)").matches; 25 // Light theme is 1 and Dark theme is 2
26 this.mode = JSON.parse(localStorage.overrideDark) ? 2 : 1;
27 }
28 this.isDark = this.getIsDark();
24 this.$emit("updated", this.isDark); 29 this.$emit("updated", this.isDark);
25 }, 30 },
26 methods: { 31 methods: {
27 toggleTheme: function () { 32 toggleTheme: function () {
28 this.isDark = !this.isDark; 33 this.mode = (this.mode + 1) % 3
29 localStorage.overrideDark = this.isDark; 34 switch(this.mode) {
35 // Default behavior
36 case 0:
37 localStorage.removeItem("overrideDark");
38 break
39 // Force light theme
40 case 1:
41 localStorage.overrideDark = false;
42 break
43 // Force dark theme
44 case 2:
45 localStorage.overrideDark = true;
46 break
47 default:
48 // Should be unreachable
49 break
50 }
51
52 this.isDark = this.getIsDark();
30 this.$emit("updated", this.isDark); 53 this.$emit("updated", this.isDark);
31 }, 54 },
55
56 getIsDark: function() {
57 const values = [matchMedia("(prefers-color-scheme: dark)").matches, false, true];
58 return values[this.mode];
59 }
32 }, 60 },
33}; 61};
34</script> 62</script>