elk/components/settings/SettingsThemeColors.vue
2023-12-22 13:25:34 +01:00

30 lines
912 B
Vue

<script setup lang="ts">
import type { ThemeColors } from '~/composables/settings'
const themes = await import('~/constants/themes.json').then(r => r.default) as [string, ThemeColors][]
const settings = $(useUserSettings())
const currentTheme = $computed(() => settings.themeColors?.['--theme-color-name'] || themes[0][1]['--theme-color-name'])
function updateTheme(theme: ThemeColors) {
settings.themeColors = theme
}
</script>
<template>
<div flex="~ gap4 wrap" p2>
<button
v-for="[key, theme] in themes" :key="key"
:style="{
'background': key,
'--local-ring-color': key,
}"
:class="currentTheme === theme['--theme-color-name'] ? 'ring-2' : 'scale-90'"
:title="theme['--theme-color-name']"
w-8 h-8 rounded-full transition-all
ring="$local-ring-color offset-3 offset-$c-bg-base"
@click="updateTheme(theme)"
/>
</div>
</template>