Update theme on system color mode change (woodpecker-ci#3296)

Currently, when theme `auto` is set and the system theme changes, users need to reload the site themselves. This PR adds an even listener which listens for such changes and reloads the theme automatically in the background. --------- Co-authored-by: Anbraten <[email protected]>
quintoandar · Feb 1, 2024 · cfb6014 · cfb6014
1 parent ea40e7a
commit cfb6014
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/web/src/compositions/useTheme.ts b/web/src/compositions/useTheme.ts
@@ -1,7 +1,11 @@
 import { useColorMode } from '@vueuse/core';
 import { watch } from 'vue';
 
-const { store: storeTheme, state: resolvedTheme } = useColorMode({
+const {
+  store: storeTheme,
+  state: resolvedTheme,
+  system: systemTheme,
+} = useColorMode({
   storageKey: 'woodpecker:theme',
 });
 
@@ -19,9 +23,7 @@ function updateTheme() {
   }
 }
 
-watch(storeTheme, updateTheme);
-
-updateTheme();
+watch([storeTheme, systemTheme], updateTheme, { immediate: true });
 
 export function useTheme() {
   return {