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

diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index 4318c228bbf0a940d27a104f09b83bcf04129d3c..f0f823db198977917425fe7685e05e66201d5479 100644 (file)
--- 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>