From 6cfa1643b4024af3a504fcc547fcd04dbb1a0d0a Mon Sep 17 00:00:00 2001
From: Gabe Cook <gabe565@gmail.com>
Date: Wed, 10 May 2023 02:38:51 -0500
Subject: [PATCH] Toggle dark mode when `prefers-color-scheme` changes

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

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>
-- 
2.41.0