From 4a1e8717e90d1b0b516da2cbc1d16ff906d7fbdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Caillaut?= <gcaillaut@protonmail.com>
Date: Sat, 6 Mar 2021 15:12:22 +0100
Subject: cycle between automatic-light-dark themes

---
 src/components/DarkMode.vue | 42 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 35 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index a5aae41..02450d9 100644
--- a/src/components/DarkMode.vue
+++ b/src/components/DarkMode.vue
@@ -4,7 +4,7 @@
     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"></i>
   </a>
 </template>
 
@@ -14,21 +14,49 @@ export default {
   data: function () {
     return {
       isDark: null,
+      faClasses: 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.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];
+    }
   },
 };
 </script>
-- 
cgit v1.2.3


From c0044cc7653329044458fb233757b935893cd1a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Caillaut?= <gcaillaut@protonmail.com>
Date: Tue, 9 Mar 2021 18:12:30 +0100
Subject: title attribute that display current theme

---
 src/components/DarkMode.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index 02450d9..4c5ba03 100644
--- a/src/components/DarkMode.vue
+++ b/src/components/DarkMode.vue
@@ -4,7 +4,7 @@
     aria-label="Toggle dark mode"
     class="navbar-item is-inline-block-mobile"
   >
-    <i :class="`${faClasses[mode]}`" class="fa-fw"></i>
+    <i :class="`${faClasses[mode]}`" class="fa-fw" :title="`${titles[mode]}`"></i>
   </a>
 </template>
 
@@ -15,11 +15,13 @@ export default {
     return {
       isDark: null,
       faClasses: null,
+      titles: null,
       mode: null,
     };
   },
   created: function () {
     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
-- 
cgit v1.2.3


From edc336bba683cbc06d1f3b8bace14a80ec2d7c5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Caillaut?= <gcaillaut@protonmail.com>
Date: Tue, 9 Mar 2021 18:29:41 +0100
Subject: yarn lint

---
 src/components/DarkMode.vue | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index 4c5ba03..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"
   >
-    <i :class="`${faClasses[mode]}`" class="fa-fw" :title="`${titles[mode]}`"></i>
+    <i
+      :class="`${faClasses[mode]}`"
+      class="fa-fw"
+      :title="`${titles[mode]}`"
+    ></i>
   </a>
 </template>
 
@@ -21,7 +25,7 @@ export default {
   },
   created: function () {
     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;
     if ("overrideDark" in localStorage) {
       // Light theme is 1 and Dark theme is 2
@@ -32,33 +36,37 @@ export default {
   },
   methods: {
     toggleTheme: function () {
-      this.mode = (this.mode + 1) % 3
-      switch(this.mode) {
+      this.mode = (this.mode + 1) % 3;
+      switch (this.mode) {
         // Default behavior
         case 0:
           localStorage.removeItem("overrideDark");
-          break
+          break;
         // Force light theme
         case 1:
           localStorage.overrideDark = false;
-          break
+          break;
         // Force dark theme
         case 2:
           localStorage.overrideDark = true;
-          break
+          break;
         default:
           // Should be unreachable
-          break
+          break;
       }
 
       this.isDark = this.getIsDark();
       this.$emit("updated", this.isDark);
     },
 
-    getIsDark: function() {
-      const values = [matchMedia("(prefers-color-scheme: dark)").matches, false, true];
+    getIsDark: function () {
+      const values = [
+        matchMedia("(prefers-color-scheme: dark)").matches,
+        false,
+        true,
+      ];
       return values[this.mode];
-    }
+    },
   },
 };
 </script>
-- 
cgit v1.2.3