39 lines
988 B
TypeScript
39 lines
988 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')
|
|
}
|
|
|
|
const initTheme = () => {
|
|
if (!process.client) return
|
|
const saved = localStorage.getItem('theme') // 'dark' | 'light' | null
|
|
const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false
|
|
|
|
const value = saved ? saved === 'dark' : prefersDark
|
|
isDark.value = value
|
|
applyTheme(value)
|
|
}
|
|
|
|
onMounted(initTheme)
|
|
|
|
watch(isDark, (v) => applyTheme(v))
|
|
|
|
const toggle = () => {
|
|
isDark.value = !isDark.value
|
|
}
|
|
|
|
const set = (v: boolean) => {
|
|
isDark.value = v
|
|
}
|
|
|
|
return { isDark, toggle, set }
|
|
}
|