Make darkmode

src/components/about/content.svelte

@@ -19,7 +19,7 @@
 	(or well, they can with WebAssembly) and that's why I had to make this website in JavaScript. I had
 	done this in Go, but it was just too clunky. The results of that can be seen in the Gitea repository
 	<a
-		class="underline text-[#002896] hover:text-blue-500"
+		class="underline text-[#002896] dark:text-blue-200 dark:hover:text-blue-50 hover:text-blue-500"
 		href="https://dutchellie.nl/DutchEllie/proper-website-2">DutchEllie/proper-website-2</a
 	>.
 	<br>

src/components/about/likes.svelte

@@ -1,5 +1,5 @@
 <div
-	class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 bg-red-50 rounded-xl p-3 gap-y-5"
+	class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 bg-red-50 dark:bg-slate-800 rounded-xl p-3 gap-y-5"
 >
 	<ul class="list-disc ml-4">
 		<p class="font-bold">Music</p>

src/components/about/sidebar.svelte

@@ -1,8 +1,8 @@
 <script>
 </script>
 
-<div class="w-full h-full bg-red-100 rounded-xl">
+<div class="w-full h-full bg-red-100 dark:bg-slate-800 rounded-xl dark:text-slate-200">
-	<div class="p-3 rounded-t-xl bg-indigo-200">
+	<div class="p-3 rounded-t-xl bg-indigo-200 dark:bg-slate-700">
 		<h1 class="font-semibold">Profile:</h1>
 	</div>
 	<div class="p-2">

src/components/homepage/content.svelte

@@ -8,7 +8,7 @@
 	<br class="hidden lg:block" />
 </!-->
 	<p class="font-roboto_slab text-center lg:text-2xl text-md lg:mt-5">The modern web meets 2000</p>
-	<hr class="border-black" />
+	<hr class="border-black dark:border-[#ffc0f5]" />
 	<br />
 	<div class="md:text-center lg:px-40">
 		<p class="">
@@ -36,10 +36,10 @@
 			<div class="col-span-1">
 				<h2 class="font-semibold text-left ml-10 mb-2">Misc</h2>
 				<ul class="ml-10 list-disc marker:text-blue-400">
-					<li class="underline text-[#002896] hover:text-blue-500">
+					<li class="underline text-[#002896] dark:text-blue-200 dark:hover:text-blue-50 hover:text-blue-500">
 						<a href="https://dutchellie.nl/DutchEllie/svelte-testing">Gitea Repo</a>
 					</li>
-					<li class="underline text-[#002896] hover:text-blue-500">
+					<li class="underline text-[#002896] dark:text-blue-200 dark:hover:text-blue-50 hover:text-blue-500">
 						<a href="https://drone.dutchellie.nl/DutchEllie/svelte-testing"
 							>Drone CI/CD
 							<img

src/components/misc/hamburger.svelte

@@ -10,7 +10,7 @@
 	}}
 	class="w-full h-full min-w-max"
 >
-	<img src="/assets/images/icons8-menu.svg" alt="Hamburger menu" />
+	<img src="/assets/images/icons8-menu.svg" class="dark:invert" alt="Hamburger menu" />
 </button>
 
 <Menu bind:open />

src/components/misc/menu.svelte

@@ -11,7 +11,7 @@
 		on:click={() => {
 			open = !open;
 		}}
-		class="z-10 bg-white absolute top-0 left-0 h-screen w-screen flex flex-col gap-4 text-center pt-16"
+		class="z-10 bg-gradient-to-tr dark:bg-gradient-to-tr absolute top-0 left-0 h-screen w-screen flex flex-col gap-4 text-center pt-16"
 	>
 		<Button link="/" text="Home" />
 		<Button link="/about" text="About" />

src/components/misc/navbutton.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <a href="{link}" class="">
-<button class="{$page.url.pathname == link ? "active-now" : ""} text-murasaki md:text-xl py-2 px-4 font-montserrat font-semibold link-underline">
+<button class="{$page.url.pathname == link ? "active-now" : ""}  md:text-xl py-2 px-4 font-montserrat font-semibold link-underline">
 	{text}
 </button>
 </a>

src/routes/__layout.svelte

@@ -38,7 +38,7 @@
 	<Musicplayer />
 </div>
 <div
-	class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-full text-murasaki overflow-auto min-h-screen relative "
+	class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] dark:from-[#3c085a] to-[#FFAFCC] dark:to-[#0f1838] w-full text-murasaki dark:text-slate-300 overflow-auto min-h-screen relative "
 >
 	<!-- Page content -->
 	<div class="" style="padding-bottom: {footerHeight + 10}px;">
@@ -52,9 +52,9 @@
 		<slot />
 	</div>
 	<!-- Footer -->
-	<div bind:clientHeight={footerHeight} class="bg-slate-100 w-full h-min md:h-10 lg:pl-20 absolute bottom-0">
+	<div bind:clientHeight={footerHeight} class="bg-slate-100 dark:bg-purple-900 dark:text-pink-50 w-full h-min md:h-10 lg:pl-20 absolute bottom-0">
 		<div class="h-full">
-			<button on:click={onMusicToggle} class="bg-white border-black border rounded h-min w-20 mt-1">
+			<button on:click={onMusicToggle} class="bg-white dark:bg-[#B68BD6] dark:text-[#040033] border-black border rounded h-min w-20 mt-1">
 				{#if musicPaused}
 					<span class="font-mono">▶</span>
 					Play
@@ -64,7 +64,7 @@
 				{/if}
 			</button>
 			<button
-				class="bg-white border-black border rounded h-min"
+				class="bg-white dark:bg-[#B68BD6] dark:text-[#040033] border-black border rounded h-min px-3"
 				on:click={() => {
 					modalShow = !modalShow;
 				}}>Show music selection</button

tailwind.config.cjs

@@ -2,10 +2,12 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{html,js,svelte,ts}'],
+//  darkMode: 'class',
   theme: {
     extend: {
       colors: {
         'murasaki': '#4f284b',
+        'dark-text': '#FFB9D2'
       },
       fontFamily: {
         sans: ['Roboto Flex', ...defaultTheme.fontFamily.sans],