forked from extern/homer
yarn lint
This commit is contained in:
parent
c0044cc765
commit
edc336bba6
@ -4,7 +4,11 @@
|
|||||||
aria-label="Toggle dark mode"
|
aria-label="Toggle dark mode"
|
||||||
class="navbar-item is-inline-block-mobile"
|
class="navbar-item is-inline-block-mobile"
|
||||||
>
|
>
|
||||||
<i :class="`${faClasses[mode]}`" class="fa-fw" :title="`${titles[mode]}`"></i>
|
<i
|
||||||
|
:class="`${faClasses[mode]}`"
|
||||||
|
class="fa-fw"
|
||||||
|
:title="`${titles[mode]}`"
|
||||||
|
></i>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -21,7 +25,7 @@ export default {
|
|||||||
},
|
},
|
||||||
created: function () {
|
created: function () {
|
||||||
this.faClasses = ["fas fa-adjust", "fas fa-circle", "far fa-circle"];
|
this.faClasses = ["fas fa-adjust", "fas fa-circle", "far fa-circle"];
|
||||||
this.titles = ["Auto-switch", "Light theme", "Dark theme"]
|
this.titles = ["Auto-switch", "Light theme", "Dark theme"];
|
||||||
this.mode = 0;
|
this.mode = 0;
|
||||||
if ("overrideDark" in localStorage) {
|
if ("overrideDark" in localStorage) {
|
||||||
// Light theme is 1 and Dark theme is 2
|
// Light theme is 1 and Dark theme is 2
|
||||||
@ -32,33 +36,37 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggleTheme: function () {
|
toggleTheme: function () {
|
||||||
this.mode = (this.mode + 1) % 3
|
this.mode = (this.mode + 1) % 3;
|
||||||
switch(this.mode) {
|
switch (this.mode) {
|
||||||
// Default behavior
|
// Default behavior
|
||||||
case 0:
|
case 0:
|
||||||
localStorage.removeItem("overrideDark");
|
localStorage.removeItem("overrideDark");
|
||||||
break
|
break;
|
||||||
// Force light theme
|
// Force light theme
|
||||||
case 1:
|
case 1:
|
||||||
localStorage.overrideDark = false;
|
localStorage.overrideDark = false;
|
||||||
break
|
break;
|
||||||
// Force dark theme
|
// Force dark theme
|
||||||
case 2:
|
case 2:
|
||||||
localStorage.overrideDark = true;
|
localStorage.overrideDark = true;
|
||||||
break
|
break;
|
||||||
default:
|
default:
|
||||||
// Should be unreachable
|
// Should be unreachable
|
||||||
break
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.isDark = this.getIsDark();
|
this.isDark = this.getIsDark();
|
||||||
this.$emit("updated", this.isDark);
|
this.$emit("updated", this.isDark);
|
||||||
},
|
},
|
||||||
|
|
||||||
getIsDark: function() {
|
getIsDark: function () {
|
||||||
const values = [matchMedia("(prefers-color-scheme: dark)").matches, false, true];
|
const values = [
|
||||||
|
matchMedia("(prefers-color-scheme: dark)").matches,
|
||||||
|
false,
|
||||||
|
true,
|
||||||
|
];
|
||||||
return values[this.mode];
|
return values[this.mode];
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user