48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { defineStore } from 'pinia'
|
|
import { computed, ref } from 'vue'
|
|
|
|
export const useThemeStore = defineStore('theme', () => {
|
|
const vueuseColorScheme = ref(localStorage.getItem('vueuse-color-scheme'))
|
|
const themeIcon = computed(() => {
|
|
switch (true) {
|
|
case vueuseColorScheme.value == 'light':
|
|
return 'i-heroicons-sun'
|
|
case vueuseColorScheme.value == 'dark':
|
|
return 'i-heroicons-moon'
|
|
case vueuseColorScheme.value == 'auto':
|
|
return 'i-heroicons-computer-desktop'
|
|
}
|
|
})
|
|
|
|
function setTheme() {
|
|
switch (true) {
|
|
case localStorage.getItem('vueuse-color-scheme') == 'dark':
|
|
vueuseColorScheme.value = 'light'
|
|
localStorage.setItem('vueuse-color-scheme', 'light')
|
|
document.documentElement.classList.toggle('dark', false)
|
|
break
|
|
case localStorage.getItem('vueuse-color-scheme') == 'light':
|
|
vueuseColorScheme.value = 'dark'
|
|
localStorage.setItem('vueuse-color-scheme', 'dark')
|
|
document.documentElement.classList.toggle('dark', true)
|
|
break
|
|
case localStorage.getItem('vueuse-color-scheme') == 'auto':
|
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
vueuseColorScheme.value = 'light'
|
|
localStorage.setItem('vueuse-color-scheme', 'light')
|
|
document.documentElement.classList.toggle('dark', false)
|
|
} else {
|
|
vueuseColorScheme.value = 'light'
|
|
localStorage.setItem('vueuse-color-scheme', 'light')
|
|
document.documentElement.classList.toggle('dark', false)
|
|
}
|
|
break
|
|
}
|
|
}
|
|
return {
|
|
vueuseColorScheme,
|
|
setTheme,
|
|
themeIcon,
|
|
}
|
|
})
|