From 8c6406d7374ba43cac95570ae26ad5ed0abd5eae Mon Sep 17 00:00:00 2001
From: rmt/src <144435+rmtsrc@users.noreply.github.com>
Date: Sat, 1 Feb 2025 12:36:22 +0000
Subject: [PATCH] Use prefers-color-scheme

---
 web/src/App.vue        | 19 ++++++++++++++++---
 web/src/views/Auth.vue | 22 ++++++++++++++++++++++
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index fcff16de0..6282053a9 100644
--- a/web/src/App.vue
+++ b/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 {
diff --git a/web/src/views/Auth.vue b/web/src/views/Auth.vue
index c99f387ba..12a02aa49 100644
--- a/web/src/views/Auth.vue
+++ b/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();
 
@@ -284,6 +293,19 @@ export default {
       default:
         throw new Error(`Unknown authentication status: ${status}`);
     }
+
+    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;
+      }
+    }
   },
 
   methods: {