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');

src/routes/+layout.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
 	import '@fortawesome/fontawesome-free/css/all.min.css';
+	import { themeVariant } from '$lib/themeVariant';
 </script>
 
-<slot />
+<div class:is-light={$themeVariant == 'light'} class:is-dark={$themeVariant == 'dark'}>
+	<slot />
+</div>

src/routes/+page.svelte

@@ -1,16 +1,39 @@
 <script lang="ts">
 	import Brand from '$lib/components/Brand.svelte';
 	import ServiceGroup from '$lib/components/ServiceGroup.svelte';
+	import ThemeVariantButton from '$lib/components/ThemeVariantButton.svelte';
+	import type { ColorConfig } from '$lib/config';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
 
-	function renderColorVariables(): string {
+	function cssVariables(colors: ColorConfig): string {
 		const cssVars: Array<string> = [];
-		for (const [key, value] of Object.entries(data.config.colors.dark)) {
+		for (const [key, value] of Object.entries(colors)) {
 			cssVars.push(`--${key}:${value}`);
 		}
-		return '<style>:root{' + cssVars.join(';') + '}</style>';
+		return cssVars.join(';');
+	}
+
+	function renderColorVariables() {
+		return `<style>
+:root, body .is-light {
+  ${cssVariables(data.config.colors.light)}
+}
+@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
+  :root, body {
+    ${cssVariables(data.config.colors.light)}
+  }
+}
+:root, body .is-dark {
+  ${cssVariables(data.config.colors.dark)}
+}
+@media (prefers-color-scheme: dark) {
+  :root, body {
+    ${cssVariables(data.config.colors.dark)}
+  }
+}
+</style>`;
 	}
 </script>
 
@@ -26,6 +49,7 @@
 	{#if data.config.subtitle}
 		<h2>{data.config.subtitle}</h2>
 	{/if}
+	<ThemeVariantButton />
 </header>
 {#each data.config.services as group, i}
 	<ServiceGroup {group} groupData={data.serviceData[i]} />