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);
53 toggleTheme: function () {
54 this.mode = (this.mode + 1) % 3;
58 localStorage.removeItem("overrideDark");
62 localStorage.overrideDark = false;
66 localStorage.overrideDark = true;
69 // Should be unreachable
73 this.isDark = this.getIsDark();
74 this.$emit("updated", this.isDark);
77 getIsDark: function () {
79 matchMedia("(prefers-color-scheme: dark)").matches,
83 return values[this.mode];
86 watchIsDark: function () {
87 matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
88 this.isDark = this.getIsDark();
89 this.$emit("updated", this.isDark);