max
703f531cd3
📊 Benchmark the Runtime / benchmark (pull_request) Successful in 1m6s
🚀 Lint & Test & Deploy / quality (pull_request) Failing after 1m0s
🚀 Lint & Test & Deploy / test-unit (pull_request) Successful in 36s
🚀 Lint & Test & Deploy / test-e2e (pull_request) Successful in 1m57s
🚀 Lint & Test & Deploy / deploy (pull_request) Has been skipped
30 lines
743 B
Svelte
30 lines
743 B
Svelte
<script lang="ts">
|
|
import { InputSelect } from '$lib';
|
|
const themes = [
|
|
'dark',
|
|
'light',
|
|
'solarized',
|
|
'catppuccin',
|
|
'high-contrast',
|
|
'high-contrast-light',
|
|
'nord',
|
|
'dracula',
|
|
'custom'
|
|
];
|
|
|
|
// eslint-disable-next-line no-useless-assignment
|
|
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>
|