Update theme on system color mode change (#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 <anton@ju60.de>

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 {