45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { computed } from 'vue'
|
|
import { useSessionStorage } from '@vueuse/core'
|
|
import { useData } from 'vitepress'
|
|
import { type Theme, themes } from './../lib/registry/themes'
|
|
import { type Style, styles } from '@/lib/registry/styles'
|
|
|
|
interface Config {
|
|
theme?: Theme['name']
|
|
radius: number
|
|
style: Style
|
|
}
|
|
|
|
export const RADII = [0, 0.25, 0.5, 0.75, 1]
|
|
|
|
export function useConfigStore() {
|
|
const { isDark } = useData()
|
|
const config = useSessionStorage<Config>('config', {
|
|
radius: 0.5,
|
|
style: styles[0].name,
|
|
})
|
|
|
|
const themeClass = computed(() => `theme-${config.value.theme}`)
|
|
|
|
const theme = computed(() => config.value.theme)
|
|
const radius = computed(() => config.value.radius)
|
|
const style = computed(() => config.value.style)
|
|
|
|
function setTheme(themeName: Theme['name']) {
|
|
config.value.theme = themeName
|
|
}
|
|
|
|
function setRadius(newRadius: number) {
|
|
config.value.radius = newRadius
|
|
}
|
|
|
|
const themePrimary = computed(() => {
|
|
const t = themes.find(t => t.name === theme.value)
|
|
return `hsl(${
|
|
t?.cssVars[isDark ? 'dark' : 'light'].primary
|
|
})`
|
|
})
|
|
|
|
return { config, theme, setTheme, radius, setRadius, themeClass, style, themePrimary }
|
|
}
|