From da4bd8b97ddb357e11e2f18442b304242a37909b Mon Sep 17 00:00:00 2001
From: Patrick Schratz <patrick.schratz@gmail.com>
Date: Tue, 30 Jan 2024 11:00:07 +0100
Subject: [PATCH] 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 | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/src/compositions/useTheme.ts b/web/src/compositions/useTheme.ts
index 159fe8ed9..8476cb925 100644
--- 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 {