X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2Fcomponents%2FDarkMode.vue;h=677238acbd101bdf4683e554b66b6a4a0028f2ba;hb=585844394d7a4cc4a58e30fd42cb1f8e83ac02f7;hp=a5aae41cfa15911334d5ce94d0272babc25bf90a;hpb=da6e676d6e42bb3e9a9feb212e152904330cff10;p=github%2Fbastienwirtz%2Fhomer.git

diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index a5aae41..677238a 100644
--- a/src/components/DarkMode.vue
+++ b/src/components/DarkMode.vue
@@ -4,31 +4,83 @@
     aria-label="Toggle dark mode"
     class="navbar-item is-inline-block-mobile"
   >
-    <i class="fas fa-fw fa-adjust"></i>
+    <i
+      :class="`${faClasses[mode]}`"
+      class="fa-fw"
+      :title="`${titles[mode]}`"
+    ></i>
   </a>
 </template>
 
 <script>
 export default {
   name: "Darkmode",
+  props: {
+    defaultValue: String,
+  },
   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;
+    } else {
+      switch (this.defaultValue) {
+        case "light":
+          this.mode = 1;
+          break;
+        case "dark":
+          this.mode = 2;
+          break;
+        default:
+          this.mode = 0;
+      }
+    }
+    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];
+    },
   },
 };
 </script>