30 lines
680 B
TypeScript
30 lines
680 B
TypeScript
import { ref, watch, onMounted } from 'vue'
|
|
|
|
export type Theme = 'dark' | 'light'
|
|
|
|
const theme = ref<Theme>('dark')
|
|
|
|
export function useTheme() {
|
|
const applyTheme = (t: Theme) => {
|
|
theme.value = t
|
|
document.body.dataset.theme = t
|
|
localStorage.setItem('uiTheme', t)
|
|
}
|
|
|
|
const toggleTheme = () => {
|
|
applyTheme(theme.value === 'light' ? 'dark' : 'light')
|
|
}
|
|
|
|
const initTheme = () => {
|
|
const saved = localStorage.getItem('uiTheme') as Theme | null
|
|
const prefersLight = window.matchMedia?.('(prefers-color-scheme: light)').matches
|
|
applyTheme(saved || (prefersLight ? 'light' : 'dark'))
|
|
}
|
|
|
|
return {
|
|
theme,
|
|
toggleTheme,
|
|
initTheme
|
|
}
|
|
}
|