Fix system theme not respecting preferred dark theme. (#1673)

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
   )
 }

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)')
+  const query = window.matchMedia('(prefers-color-scheme: light)')
-  if (colorSchemeQueryList.matches) {
+  setSystemTheme(query.matches)
+}
+
+function setSystemTheme(light) {
+  if (light) {
     systemTheme.value = 'light'
   } else {
-    systemTheme.value = cosmetics.value.preferredDarkTheme
+    systemTheme.value = cosmetics.value.preferredDarkTheme ?? 'dark'
   }
 }
 

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')
           }
         }
       }