From: Gabe Cook <gabe565@gmail.com>
Date: Wed, 10 May 2023 07:38:51 +0000 (-0500)
Subject: Toggle dark mode when `prefers-color-scheme` changes
X-Git-Tag: v23.05.1~2
X-Git-Url: https://git.immae.eu/?a=commitdiff_plain;h=6cfa1643b4024af3a504fcc547fcd04dbb1a0d0a;p=github%2Fbastienwirtz%2Fhomer.git

Toggle dark mode when `prefers-color-scheme` changes
---

diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index 4318c22..f0f823d 100644
--- a/src/components/DarkMode.vue
+++ b/src/components/DarkMode.vue
@@ -47,6 +47,7 @@ export default {
     }
     this.isDark = this.getIsDark();
     this.$emit("updated", this.isDark);
+    this.watchIsDark();
   },
   methods: {
     toggleTheme: function () {
@@ -81,6 +82,13 @@ export default {
       ];
       return values[this.mode];
     },
+
+    watchIsDark: function () {
+      matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+        this.isDark = this.getIsDark();
+        this.$emit("updated", this.isDark);
+      });
+    },
   },
 };
 </script>