Option to follow system dark theme

src/App.vue

@@ -27,22 +27,67 @@ export default {
   },
 
   data: function() {
-    return {};
+    return {
+      systemDark: undefined,
+      themeObserver: undefined
+    };
   },
 
   computed: {
+    isSystemDark: function() {
+      if (
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    },
     handleTheme: function() {
+      var isDark = false;
+      if (this.$store.state.globalSettings.appTheme == "dark") {
+        isDark = true;
+      } else if (this.$store.state.globalSettings.appTheme == "system") {
+        if (this.systemDark) {
+          isDark = true;
+        }
+      }
       return {
-        "uk-light": this.$store.state.globalSettings.darkMode,
-        "uk-background-secondary": this.$store.state.globalSettings.darkMode
+        "uk-light": isDark,
+        "uk-background-secondary": isDark
       };
     }
   },
 
+  mounted() {
+    // Query CSS dark theme preference
+    var mql = window.matchMedia("(prefers-color-scheme: dark)");
+    // Check for system dark theme when mounted
+    if (mql.matches) {
+      this.systemDark = true;
+    }
+    // Create a theme observer to watch for changes
+    this.themeObserver = mql.addListener(e => {
+      if (e.matches) {
+        this.systemDark = true;
+      } else {
+        this.systemDark = false;
+      }
+    });
+  },
+
   created: function() {
     window.addEventListener("beforeunload", this.handleExit);
   },
 
+  beforeDestroy: function() {
+    // Disconnect the theme observer
+    if (this.themeObserver) {
+      this.themeObserver.disconnect();
+    }
+  },
+
   methods: {
     handleExit: function() {
       console.log("Triggered beforeunload");