From cfb6014f28fc213ab1ceb045d5ebf0bf009ea490 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 159fe8ed9ac..8476cb925ab 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 {