3 v-on:click="toggleTheme()"
4 aria-label="Toggle dark mode"
5 class="navbar-item is-inline-block-mobile"
8 :class="`${faClasses[mode]}`"
10 :title="`${titles[mode]}`"
29 created: function () {
30 this.faClasses = ["fas fa-adjust", "fas fa-circle", "far fa-circle"];
31 this.titles = ["Auto-switch", "Light theme", "Dark theme"];
33 if ("overrideDark" in localStorage) {
34 // Light theme is 1 and Dark theme is 2
35 this.mode = JSON.parse(localStorage.overrideDark) ? 2 : 1;
37 switch (this.defaultValue) {
48 this.isDark = this.getIsDark();
49 this.$emit("updated", this.isDark);
52 toggleTheme: function () {
53 this.mode = (this.mode + 1) % 3;
57 localStorage.removeItem("overrideDark");
61 localStorage.overrideDark = false;
65 localStorage.overrideDark = true;
68 // Should be unreachable
72 this.isDark = this.getIsDark();
73 this.$emit("updated", this.isDark);
76 getIsDark: function () {
78 matchMedia("(prefers-color-scheme: dark)").matches,
82 return values[this.mode];