29 lines
627 B
TypeScript
29 lines
627 B
TypeScript
import { useQuasar } from 'quasar'
|
|
|
|
export const useThemeMode = () => {
|
|
const $q = useQuasar()
|
|
|
|
// deterministic on SSR: default = light
|
|
const isDark = useState<boolean>('theme:isDark', () => false)
|
|
|
|
const applyTheme = (value: boolean) => {
|
|
if (!process.client) return
|
|
document.documentElement.classList.toggle('dark', value)
|
|
$q.dark.set(value)
|
|
localStorage.setItem('theme', value ? 'dark' : 'light')
|
|
}
|
|
|
|
|
|
|
|
watch(isDark, (v) => applyTheme(v))
|
|
|
|
const toggle = () => {
|
|
isDark.value = !isDark.value
|
|
}
|
|
|
|
const set = (v: boolean) => {
|
|
isDark.value = v
|
|
}
|
|
|
|
return { isDark, toggle, set }
|
|
}
|