From 5b1850e161342512fcb0ad0609a9c8e285dcafec Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Wed, 10 Apr 2024 18:30:46 -0700
Subject: [PATCH] Fix system theme not respecting preferred dark theme. (#1673)

---
 layouts/default.vue      |  4 +++-
 pages/settings/index.vue | 15 +++++++++++----
 plugins/1.theme.js       |  3 ++-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index ae4096979e..bb764dcaee 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -722,7 +722,9 @@ function toggleBrowseMenu() {
 }
 function changeTheme() {
   updateTheme(
-    DARK_THEMES.includes(app.$colorMode.value) ? 'light' : cosmetics.value.preferredDarkTheme,
+    DARK_THEMES.includes(app.$colorMode.value)
+      ? 'light'
+      : cosmetics.value.preferredDarkTheme ?? 'dark',
     true
   )
 }
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 864ae7c334..78826b84e9 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -41,7 +41,7 @@
               class="theme-icon"
             />
             <MoonIcon
-              v-else-if="cosmetics.preferredDarkTheme === option"
+              v-else-if="(cosmetics.preferredDarkTheme ?? 'dark') === option"
               v-tooltip="formatMessage(colorTheme.preferredDark)"
               class="theme-icon"
             />
@@ -402,14 +402,21 @@ const themeOptions = computed(() => {
 
 onMounted(() => {
   updateSystemTheme()
+  window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (event) => {
+    setSystemTheme(event.matches)
+  })
 })
 
 function updateSystemTheme() {
-  const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: light)')
-  if (colorSchemeQueryList.matches) {
+  const query = window.matchMedia('(prefers-color-scheme: light)')
+  setSystemTheme(query.matches)
+}
+
+function setSystemTheme(light) {
+  if (light) {
     systemTheme.value = 'light'
   } else {
-    systemTheme.value = cosmetics.value.preferredDarkTheme
+    systemTheme.value = cosmetics.value.preferredDarkTheme ?? 'dark'
   }
 }
 
diff --git a/plugins/1.theme.js b/plugins/1.theme.js
index 29fa1cf1c1..4ec6cb10d4 100644
--- a/plugins/1.theme.js
+++ b/plugins/1.theme.js
@@ -2,6 +2,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   await useAuth()
   await useUser()
   const themeStore = useTheme()
+  const cosmetics = useCosmetics()
 
   nuxtApp.hook('app:mounted', () => {
     if (process.client && themeStore.value.preference === 'system') {
@@ -12,7 +13,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
           if (e.matches) {
             updateTheme('light')
           } else {
-            updateTheme('dark')
+            updateTheme(cosmetics.value.preferredDarkTheme ?? 'dark')
           }
         }
       }