From e0e9d33dec7a48aa6305b05f79b9329b29cf41df Mon Sep 17 00:00:00 2001
From: DutchEllie <personal@quenten.nl>
Date: Tue, 5 Jul 2022 16:00:52 +0200
Subject: [PATCH] Make darkmode

---
 src/components/about/content.svelte    | 2 +-
 src/components/about/likes.svelte      | 2 +-
 src/components/about/sidebar.svelte    | 4 ++--
 src/components/homepage/content.svelte | 6 +++---
 src/components/misc/hamburger.svelte   | 2 +-
 src/components/misc/menu.svelte        | 2 +-
 src/components/misc/navbutton.svelte   | 2 +-
 src/routes/__layout.svelte             | 8 ++++----
 tailwind.config.cjs                    | 2 ++
 9 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/about/content.svelte b/src/components/about/content.svelte
index 124d54e..e538fcb 100644
--- a/src/components/about/content.svelte
+++ b/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>
diff --git a/src/components/about/likes.svelte b/src/components/about/likes.svelte
index 67e0ff5..4840b6c 100644
--- a/src/components/about/likes.svelte
+++ b/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>
diff --git a/src/components/about/sidebar.svelte b/src/components/about/sidebar.svelte
index 8e3b343..41e265b 100644
--- a/src/components/about/sidebar.svelte
+++ b/src/components/about/sidebar.svelte
@@ -1,8 +1,8 @@
 <script>
 </script>
 
-<div class="w-full h-full bg-red-100 rounded-xl">
-	<div class="p-3 rounded-t-xl bg-indigo-200">
+<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 dark:bg-slate-700">
 		<h1 class="font-semibold">Profile:</h1>
 	</div>
 	<div class="p-2">
diff --git a/src/components/homepage/content.svelte b/src/components/homepage/content.svelte
index 302dcbf..713aeb8 100644
--- a/src/components/homepage/content.svelte
+++ b/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
diff --git a/src/components/misc/hamburger.svelte b/src/components/misc/hamburger.svelte
index 72fc3de..9686665 100644
--- a/src/components/misc/hamburger.svelte
+++ b/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 />
diff --git a/src/components/misc/menu.svelte b/src/components/misc/menu.svelte
index f9800e2..8d1b769 100644
--- a/src/components/misc/menu.svelte
+++ b/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" />
diff --git a/src/components/misc/navbutton.svelte b/src/components/misc/navbutton.svelte
index ffe0f74..ab9452d 100644
--- a/src/components/misc/navbutton.svelte
+++ b/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>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 6c7fa59..ea43271 100644
--- a/src/routes/__layout.svelte
+++ b/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
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index e09892c..4f64173 100644
--- a/tailwind.config.cjs
+++ b/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],