Use prefers-color-scheme

Author: rmtsrc

web/src/App.vue

@@ -748,6 +748,8 @@ import socket from '@/socket';
 import RestoreProjectForm from '@/components/RestoreProjectForm.vue';
 import YesNoDialog from '@/components/YesNoDialog.vue';
 
+const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
+
 const PROJECT_COLORS = [
   'red',
   'blue',
@@ -887,8 +889,10 @@ export default {
 
     darkMode(val) {
       this.$vuetify.theme.dark = val;
-      if (val) {
+      if (val && !prefersDarkMode.matches) {
         localStorage.setItem('darkMode', '1');
+      } else if (!val && prefersDarkMode.matches) {
+        localStorage.setItem('darkMode', '0');
       } else {
         localStorage.removeItem('darkMode');
       }
@@ -931,8 +935,17 @@ export default {
   },
 
   async created() {
-    if (localStorage.getItem('darkMode') === '1') {
-      this.darkMode = true;
+    const isDarkMode = localStorage.getItem('darkMode');
+    if (isDarkMode !== null) {
+      this.darkMode = isDarkMode === '1';
+    } else {
+      prefersDarkMode.addEventListener('change', (e) => {
+        this.darkMode = e.matches;
+      });
+
+      if (prefersDarkMode.matches && localStorage.getItem('darkMode') !== '0') {
+        this.darkMode = true;
+      }
     }
 
     try {

web/src/views/Auth.vue

@@ -242,6 +242,8 @@
 import axios from 'axios';
 import { getErrorMessage } from '@/lib/error';
 
+const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
+
 export default {
   data() {
     return {
@@ -254,6 +256,7 @@ export default {
 
       loginHelpDialog: null,
 
+      darkMode: false,
       oidcProviders: [],
       loginWithPassword: null,
       authMethods: {},
@@ -266,6 +269,12 @@ export default {
     };
   },
 
+  watch: {
+    darkMode(val) {
+      this.$vuetify.theme.dark = val;
+    },
+  },
+
   async created() {
     const { status, verificationMethod } = await this.getAuthenticationStatus();