add dark mode switch

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "awwesome",
   	"description": "Enhanced user interface for Awesome Selfhosted",
-	"version": "0.6",
+	"version": "0.7",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

src/components/DarkModeSwitch.svelte

@@ -0,0 +1,46 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let darkMode = false;
+
+	const toggleDarkMode = () => {
+		darkMode = !darkMode;
+		document.documentElement.classList.toggle('dark', darkMode);
+	};
+
+	// Run onMount to set initial dark mode based on system preference
+	onMount(() => {
+		darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+		document.documentElement.classList.toggle('dark', darkMode);
+	});
+</script>
+
+<main>
+	<label class="flex h-10 items-center cursor-pointer select-none" on:click={toggleDarkMode}>
+		{#if darkMode}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="currentColor"
+				class="w-6 h-6 hover:fill-yellow-500"
+			>
+				<path
+					d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
+				/>
+			</svg>
+		{:else}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="currentColor"
+				class="w-6 h-6 hover:fill-blue-600"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		{/if}
+	</label>
+</main>

src/components/GithubLogo.svelte

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="h-6 dark:fill-white"
+	><path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+	/></svg
+>

src/components/StarOnGithub.svelte

@@ -0,0 +1,10 @@
+<script>
+	import GithubLogo from './GithubLogo.svelte';
+</script>
+
+<a
+	href="https://github.com/mkitzmann/awwesome"
+	class="flex-shrink-0 flex items-center gap-2 bg-gray-100 dark:bg-gray-800 px-4 h-10 rounded-full hover:bg-yellow-400 dark:hover:bg-yellow-700"
+>
+	Star on Github <GithubLogo />
+</a>

src/routes/[...category]/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import githubMark from '$lib/assets/github-mark.svg';
 	import type { ProjectCollection, SortOrder, SortTerm } from '../../lib/types/types';
 	import ProjectItem from '../../components/ProjectItem.svelte';
 	import { page } from '$app/stores';
@@ -13,6 +12,8 @@
 	import Logo from '../../components/Logo.svelte';
 	import SearchInput from '../../components/SearchInput.svelte';
 	import SortButton from '../../components/SortButton.svelte';
+	import DarkModeSwitch from '../../components/DarkModeSwitch.svelte';
+	import StarOnGithub from '../../components/StarOnGithub.svelte';
 
 	export let data: ProjectCollection;
 	categoryStore.set(data.categories);
@@ -75,12 +76,10 @@
 			<!--				updated {new Intl.DateTimeFormat('en-US').format(Date.now())}-->
 			<!--			</div>-->
 		</a>
-		<a
-			href="https://github.com/mkitzmann/awwesome"
-			class="flex-shrink-0 flex items-center gap-2 bg-gray-100 dark:bg-gray-800 px-4 h-10 rounded-full hover:bg-yellow-400 dark:hover:bg-yellow-700"
-		>
-			Star on Github <img src={githubMark} alt="Github repo" class="h-6 dark:fill-white" />
-		</a>
+		<div class="flex gap-8">
+			<StarOnGithub />
+			<DarkModeSwitch />
+		</div>
 	</div>
 	<div class="flex flex-col xl:flex-row gap-6 xl:gap-12">
 		<div class="xl:hidden flex flex-wrap gap-4">

tailwind.config.cjs

@@ -7,7 +7,8 @@ const config = {
 		}
 	},
 
-	plugins: []
+	plugins: [],
+	darkMode: 'class',
 };
 
 module.exports = config;