]>
Commit | Line | Data |
---|---|---|
b9c5fcf0 BW |
1 | <template> |
2 | <a | |
3 | v-on:click="toggleTheme()" | |
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", | |
18 | data: function () { | |
19 | return { | |
20 | isDark: null, | |
4a1e8717 | 21 | faClasses: null, |
c0044cc7 | 22 | titles: null, |
4a1e8717 | 23 | mode: null, |
b9c5fcf0 BW |
24 | }; |
25 | }, | |
26 | created: function () { | |
4a1e8717 | 27 | this.faClasses = ["fas fa-adjust", "fas fa-circle", "far fa-circle"]; |
edc336bb | 28 | this.titles = ["Auto-switch", "Light theme", "Dark theme"]; |
4a1e8717 GC |
29 | this.mode = 0; |
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(); | |
b9c5fcf0 BW |
35 | this.$emit("updated", this.isDark); |
36 | }, | |
37 | methods: { | |
38 | toggleTheme: function () { | |
edc336bb GC |
39 | this.mode = (this.mode + 1) % 3; |
40 | switch (this.mode) { | |
4a1e8717 GC |
41 | // Default behavior |
42 | case 0: | |
43 | localStorage.removeItem("overrideDark"); | |
edc336bb | 44 | break; |
4a1e8717 GC |
45 | // Force light theme |
46 | case 1: | |
47 | localStorage.overrideDark = false; | |
edc336bb | 48 | break; |
4a1e8717 GC |
49 | // Force dark theme |
50 | case 2: | |
51 | localStorage.overrideDark = true; | |
edc336bb | 52 | break; |
4a1e8717 GC |
53 | default: |
54 | // Should be unreachable | |
edc336bb | 55 | break; |
4a1e8717 GC |
56 | } |
57 | ||
58 | this.isDark = this.getIsDark(); | |
b9c5fcf0 BW |
59 | this.$emit("updated", this.isDark); |
60 | }, | |
4a1e8717 | 61 | |
edc336bb GC |
62 | getIsDark: function () { |
63 | const values = [ | |
64 | matchMedia("(prefers-color-scheme: dark)").matches, | |
65 | false, | |
66 | true, | |
67 | ]; | |
4a1e8717 | 68 | return values[this.mode]; |
edc336bb | 69 | }, |
b9c5fcf0 BW |
70 | }, |
71 | }; | |
72 | </script> |