feat(public): add setting dark or light mode

This commit is contained in:
riefive
2025-09-16 12:34:37 +07:00
parent 746e16ebe8
commit e02360aea5
3 changed files with 52 additions and 3 deletions
+31
View File
@@ -0,0 +1,31 @@
import { ref, watchEffect } from 'vue'
const THEME_KEY = 'theme-mode'
export function useTheme() {
const theme = ref<'light' | 'dark'>(getInitialTheme())
function getInitialTheme() {
if (typeof window === 'undefined') return 'light'
const persisted = localStorage.getItem(THEME_KEY)
if (persisted === 'dark' || persisted === 'light') return persisted
// fallback: system preference
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
function setTheme(newTheme: 'light' | 'dark') {
theme.value = newTheme
localStorage.setItem(THEME_KEY, newTheme)
document.documentElement.classList.toggle('dark', newTheme === 'dark')
}
function toggleTheme() {
setTheme(theme.value === 'dark' ? 'light' : 'dark')
}
watchEffect(() => {
setTheme(theme.value)
})
return { theme, toggleTheme }
}