feat: add ThemeButton

Author: velut

src/components/ThemeButton.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import LucideContrast from "~icons/lucide/contrast";
+
+	function toggleTheme() {
+		if (document.documentElement.classList.contains("dark")) {
+			localStorage.theme = "light";
+			document.documentElement.classList.remove("dark");
+		} else {
+			localStorage.theme = "dark";
+			document.documentElement.classList.add("dark");
+		}
+	}
+</script>
+
+<button
+	type="button"
+	class="btn-sm-icon-outline"
+	title="Change theme"
+	onclick={() => {
+		toggleTheme();
+	}}
+>
+	<LucideContrast class="size-4" />
+	<span class="sr-only">Change theme</span>
+</button>

tsconfig.json

@@ -4,8 +4,8 @@
 		"noUncheckedIndexedAccess": true,
 		"noImplicitOverride": true,
 		"plugins": [{ "name": "@astrojs/ts-plugin" }, { "name": "typescript-svelte-plugin" }],
-		"types": ["unplugin-icons/types/astro"]
+		"types": ["unplugin-icons/types/astro", "unplugin-icons/types/svelte"],
 	},
 	"include": [".astro/types.d.ts", "**/*"],
-	"exclude": ["old", "coverage", "dist", "node_modules", "public"]
+	"exclude": ["old", "coverage", "dist", "node_modules", "public"],
 }