X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2Fcomponents%2FDarkMode.vue;h=80491fafae8d2dc9fb6f467146cac0e7db8495a8;hb=7596bc527f5b995bedd6a77ed71b6e1feba1364d;hp=0bcde0f9fae9974e2082f8c3b328633765607de0;hpb=5fa6b6cfa6b3010279ead23088add5c5664e8ac0;p=github%2Fbastienwirtz%2Fhomer.git
diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index 0bcde0f..80491fa 100644
--- a/src/components/DarkMode.vue
+++ b/src/components/DarkMode.vue
@@ -4,7 +4,11 @@
aria-label="Toggle dark mode"
class="navbar-item is-inline-block-mobile"
>
-
+
@@ -14,21 +18,55 @@ export default {
data: function () {
return {
isDark: null,
+ faClasses: null,
+ titles: null,
+ mode: null,
};
},
created: function () {
- this.isDark =
- "overrideDark" in localStorage
- ? JSON.parse(localStorage.overrideDark)
- : matchMedia("(prefers-color-scheme: dark)").matches;
+ this.faClasses = ["fas fa-adjust", "fas fa-circle", "far fa-circle"];
+ this.titles = ["Auto-switch", "Light theme", "Dark theme"];
+ this.mode = 0;
+ if ("overrideDark" in localStorage) {
+ // Light theme is 1 and Dark theme is 2
+ this.mode = JSON.parse(localStorage.overrideDark) ? 2 : 1;
+ }
+ this.isDark = this.getIsDark();
this.$emit("updated", this.isDark);
},
methods: {
toggleTheme: function () {
- this.isDark = !this.isDark;
- localStorage.overrideDark = this.isDark;
+ this.mode = (this.mode + 1) % 3;
+ switch (this.mode) {
+ // Default behavior
+ case 0:
+ localStorage.removeItem("overrideDark");
+ break;
+ // Force light theme
+ case 1:
+ localStorage.overrideDark = false;
+ break;
+ // Force dark theme
+ case 2:
+ localStorage.overrideDark = true;
+ break;
+ default:
+ // Should be unreachable
+ break;
+ }
+
+ this.isDark = this.getIsDark();
this.$emit("updated", this.isDark);
},
+
+ getIsDark: function () {
+ const values = [
+ matchMedia("(prefers-color-scheme: dark)").matches,
+ false,
+ true,
+ ];
+ return values[this.mode];
+ },
},
};