Adds a theme selector

src/lib/components/ThemeVariantButton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { themeVariant, type ThemeVariant } from '$lib/themeVariant';
+
+	const variants: Array<ThemeVariant> = ['default', 'dark', 'light'];
+
+	function next() {
+		const newVariant = (variants.findIndex((v) => v == $themeVariant) + 1) % 3;
+		themeVariant.set(variants[newVariant]);
+	}
+</script>
+
+<button on:click={next}>
+	{#if $themeVariant == 'default'}
+		<i class="fa fa-circle-half-stroke" />
+	{:else if $themeVariant == 'light'}
+		<i class="fa-regular fa-circle" />
+	{:else if $themeVariant == 'dark'}
+		<i class="fa-solid fa-circle" />
+	{/if}
+</button>

src/lib/themeVariant.ts

@@ -0,0 +1,5 @@
+import { persistentWritable } from './persistentStore';
+
+export type ThemeVariant = 'default' | 'dark' | 'light';
+
+export const themeVariant = persistentWritable<ThemeVariant>('theme-variant', 'default');