Browse Source

fix(theme): wrap useTheme return with reactive() so toggle text updates immediately

useTheme returned a plain object, so template access to theme.isDark didn't track reactive dependencies. wrapping with reactive() ensures ref auto-unwrapping and proper change detection.
main
Mohan 1 month ago
parent
commit
5eea29d043
  1. 6
      src/composables/useTheme.ts

6
src/composables/useTheme.ts

@ -1,4 +1,4 @@
import { ref } from 'vue'
import { ref, reactive } from 'vue'
const STORAGE_KEY = 'mach-theme' const STORAGE_KEY = 'mach-theme'
const isDark = ref(false) const isDark = ref(false)
@ -29,8 +29,8 @@ export function initTheme(): void {
export function useTheme() { export function useTheme() {
initTheme() initTheme()
return {
return reactive({
isDark, isDark,
toggle: () => applyTheme(!isDark.value) toggle: () => applyTheme(!isDark.value)
}
})
} }
Loading…
Cancel
Save