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