diff options
Diffstat (limited to 'src/components/DarkMode.vue')
-rw-r--r-- | src/components/DarkMode.vue | 30 |
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> |