feat(ui): add InputColor and custom theme
This commit is contained in:
27
packages/ui/src/routes/ThemeSelector.svelte
Normal file
27
packages/ui/src/routes/ThemeSelector.svelte
Normal 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>
|
||||
Reference in New Issue
Block a user