-
Notifications
You must be signed in to change notification settings - Fork 8
/
useTheme.ts
31 lines (26 loc) · 801 Bytes
/
useTheme.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
export default function useTheme() {
const enabled = useState<boolean | null>('theme', ()=>null)
onMounted(()=>{
enabled.value = localStorage.getItem("theme") === "dark" ? true : false
})
const toggleTheme = () => {
enabled.value = !enabled.value
localStorage.setItem("theme", enabled.value ? "dark" : "light")
setTheme()
}
function setTheme() {
const theme = localStorage.getItem("theme")
if (theme === "dark" || (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
document.documentElement.setAttribute("data-theme", "dark")
// enabled.value = true
} else {
document.documentElement.removeAttribute("data-theme")
// enabled.value = false
}
}
return {
enabled,
toggleTheme,
setTheme,
}
}