elk/plugins/setup-global-effects.client.ts

19 lines
724 B
TypeScript
Raw Normal View History

2023-01-22 21:18:03 +01:00
import type { OldFontSize } from '~/composables/settings'
import { oldFontSizeMap } from '~/constants/options'
import { DEFAULT_FONT_SIZE } from '~/constants'
export default defineNuxtPlugin(() => {
const userSettings = useUserSettings()
2023-01-16 11:26:19 +01:00
const html = document.documentElement
watchEffect(() => {
2023-01-22 21:18:03 +01:00
const { fontSize } = userSettings.value
html.style.setProperty('--font-size', fontSize ? (oldFontSizeMap[fontSize as OldFontSize] ?? fontSize) : DEFAULT_FONT_SIZE)
})
2023-01-14 11:09:17 +01:00
watchEffect(() => {
html.classList.toggle('zen', getPreferences(userSettings.value, 'zenMode'))
2023-01-14 11:09:17 +01:00
})
2023-01-16 11:26:19 +01:00
watchEffect(() => {
Object.entries(userSettings.value.themeColors || {}).forEach(([k, v]) => html.style.setProperty(k, v))
})
})