feat(ui): add InputColor and custom theme

This commit is contained in:
2026-02-09 15:26:18 +01:00
parent 2e6466ceca
commit 64d75b9686
10 changed files with 234 additions and 59 deletions

View File

@@ -0,0 +1,27 @@
<script lang="ts">
import { InputSelect } from '$lib';
const themes = [
'dark',
'light',
'solarized',
'catppuccin',
'high-contrast',
'nord',
'dracula',
'custom'
];
let { theme = $bindable() } = $props();
let themeIndex = $state(0);
$effect(() => {
theme = themes[themeIndex];
const classList = document.documentElement.classList;
for (const c of classList) {
if (c.startsWith('theme-')) document.documentElement.classList.remove(c);
}
document.documentElement.classList.add(`theme-${themes[themeIndex]}`);
});
</script>
<InputSelect bind:value={themeIndex} options={themes}></InputSelect>