self-hosted/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-12-24 10:07:21 +02:00
Code Issues Releases Activity

Update theme on system color mode change (#3296)

Browse Source 
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
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/compositions/useTheme.ts
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 {