feat: add theme selection and customization

2026-07-07 22:59:03 -04:00
parent 49df5195bd
commit fe39b2196d
26 changed files with 3485 additions and 0 deletions
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { useL10n } from '@KTXC'
+import type { ThemerMode } from '@/types'
+
+defineProps<{
+  modelValue: ThemerMode
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: ThemerMode): void
+}>()
+
+const { t } = useL10n('themer')
+
+const modes: Array<{ value: ThemerMode; icon: string; l10n: string; label: string }> = [
+  { value: 'light', icon: 'mdi-weather-sunny', l10n: 'mode.light', label: 'Light' },
+  { value: 'dark', icon: 'mdi-weather-night', l10n: 'mode.dark', label: 'Dark' },
+  { value: 'system', icon: 'mdi-theme-light-dark', l10n: 'mode.system', label: 'System' },
+]
+</script>
+
+<template>
+  <VBtnToggle
+    :model-value="modelValue"
+    :disabled="disabled"
+    mandatory
+    divided
+    variant="outlined"
+    color="primary"
+    @update:model-value="emit('update:modelValue', $event as ThemerMode)"
+  >
+    <VBtn
+      v-for="mode in modes"
+      :key="mode.value"
+      :value="mode.value"
+      :prepend-icon="mode.icon"
+    >
+      {{ t(mode.l10n, mode.label) }}
+    </VBtn>
+  </VBtnToggle>
+</template>