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

1 files changed, 8 insertions, 0 deletions

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>