Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2026-01-20 23:21:48 +01:00
Code Issues Projects Releases Wiki Activity

extract theme watcher in a composable

Browse source
This commit is contained in:
Gauthier Roebroeck 2025-06-26 11:32:13 +08:00
parent b406c49e67
commit 45dedbf655
2 changed files with 26 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
next-ui/src/App.vue
View file

@ -9,28 +9,9 @@
</template>
<script lang="ts" setup>
import { useTheme } from 'vuetify'
import { useAppStore } from '@/stores/app'
import { usePreferredDark } from '@vueuse/core'
import { useThemeWatcher } from '@/composables/themeWatcher'
const appStore = useAppStore()
const theme = useTheme()
const prefersDark = usePreferredDark()
function updateTheme(selectedTheme: string, prefersDark: boolean) {
if (selectedTheme === 'system') {
theme.global.name.value = prefersDark ? 'dark' : 'light'
} else {
theme.global.name.value = selectedTheme
}
}
watch([() => appStore.theme, prefersDark], ([selectedTheme, prefersDark]) =>
updateTheme(selectedTheme, prefersDark),
)
// trigger an update on startup to get the proper theme loaded
updateTheme(appStore.theme, prefersDark.value)
useThemeWatcher()
</script>
<style>

24
next-ui/src/composables/themeWatcher.ts Normal file
View file

@ -0,0 +1,24 @@
import { useTheme } from 'vuetify'
import { useAppStore } from '@/stores/app'
import { usePreferredDark } from '@vueuse/core'
export function useThemeWatcher() {
const appStore = useAppStore()
const theme = useTheme()
const prefersDark = usePreferredDark()
function updateTheme(selectedTheme: string, prefersDark: boolean) {
if (selectedTheme === 'system') {
theme.global.name.value = prefersDark ? 'dark' : 'light'
} else {
theme.global.name.value = selectedTheme
}
}
watch([() => appStore.theme, prefersDark], ([selectedTheme, prefersDark]) =>
updateTheme(selectedTheme, prefersDark),
)
// trigger an update on startup to get the proper theme loaded
updateTheme(appStore.theme, prefersDark.value)
}