3 v-on:click="toggleTheme()"
4 aria-label="Toggle dark mode"
5 class="navbar-item is-inline-block-mobile"
7 <i :class="`${faClasses[mode]}`" class="fa-fw"></i>
21 created: function () {
22 this.faClasses = ["fas fa-adjust", "fas fa-circle", "far fa-circle"];
24 if ("overrideDark" in localStorage) {
25 // Light theme is 1 and Dark theme is 2
26 this.mode = JSON.parse(localStorage.overrideDark) ? 2 : 1;
28 this.isDark = this.getIsDark();
29 this.$emit("updated", this.isDark);
32 toggleTheme: function () {
33 this.mode = (this.mode + 1) % 3
37 localStorage.removeItem("overrideDark");
41 localStorage.overrideDark = false;
45 localStorage.overrideDark = true;
48 // Should be unreachable
52 this.isDark = this.getIsDark();
53 this.$emit("updated", this.isDark);
56 getIsDark: function() {
57 const values = [matchMedia("(prefers-color-scheme: dark)").matches, false, true];
58 return values[this.mode];