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>
This commit is contained in:
Patrick Schratz 2024-01-30 11:00:07 +01:00 committed by GitHub
parent 3415e2bae7
commit da4bd8b97d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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 {