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-light": isDark,
-        "uk-background-secondary": this.$store.state.globalSettings.darkMode
+        "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");

src/components/controlComponents/settingsComponents/appSettings.vue

@@ -1,10 +1,14 @@
 <template>
   <div id="appSettings">
     <p>
-      <label
+      <label>
-        ><input v-model="darkMode" class="uk-checkbox" type="checkbox" /> Enable
+        Theme
-        dark theme</label
+        <select v-model="appTheme" class="uk-select">
-      >
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+          <option value="system">System</option>
+        </select>
+      </label>
     </p>
   </div>
 </template>
@@ -19,26 +23,26 @@ export default {
   },
 
   computed: {
-    darkMode: {
+    appTheme: {
       get() {
-        return this.$store.state.globalSettings.darkMode;
+        return this.$store.state.globalSettings.appTheme;
       },
       set(value) {
-        this.$store.commit("changeSetting", ["darkMode", value]);
+        this.$store.commit("changeSetting", ["appTheme", value]);
       }
     }
   },
 
   watch: {
-    darkMode() {
+    appTheme() {
-      console.log("Saving darkmode setting");
+      console.log("Saving appTheme setting");
-      this.setLocalStorageObj("darkMode", this.darkMode);
+      this.setLocalStorageObj("appTheme", this.appTheme);
     }
   },
 
   mounted() {
     // Try loading settings from localStorage. If null, don't change.
-    this.darkMode = this.getLocalStorageObj("darkMode") || this.darkMode;
+    this.appTheme = this.getLocalStorageObj("appTheme") || this.appTheme;
   }
 };
 </script>

src/store.js

@@ -14,7 +14,7 @@ export default new Vuex.Store({
       disableStream: false,
       autoGpuPreview: false,
       trackWindow: true,
-      darkMode: false
+      appTheme: "system"
     }
   },