From fec1cdb561508755e9b94a04cfc087e222c979c6 Mon Sep 17 00:00:00 2001
From: axel <contact@axel.moe>
Date: Sat, 12 Apr 2025 01:02:59 +0200
Subject: [PATCH] added dark mode

---
 src/lib/components/forms/InputSelect.svelte          |  8 ++++----
 src/lib/components/forms/InputText.svelte            |  4 ++--
 src/lib/components/forms/InputToggle.svelte          |  6 +++---
 src/lib/components/resources/ResourceCard.svelte     |  2 +-
 src/lib/components/resources/ResourceEditPage.svelte |  4 ++--
 src/lib/components/resources/ResourceListPage.svelte |  4 ++--
 src/lib/components/ui/Button.svelte                  |  6 +++---
 src/lib/components/ui/HorizontalSpacer.svelte        |  2 +-
 src/routes/dashboard/+layout.svelte                  | 10 +++++-----
 9 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/forms/InputSelect.svelte b/src/lib/components/forms/InputSelect.svelte
index da35f10..8731298 100644
--- a/src/lib/components/forms/InputSelect.svelte
+++ b/src/lib/components/forms/InputSelect.svelte
@@ -40,7 +40,7 @@
     <label for={name} class="block w-1/3 min-w-[300px]">
         <p>{label}</p>
         {#if sublabel}
-            <p class="text-sm text-neutral-400">{sublabel}</p>    
+            <p class="text-sm text-neutral-400 dark:text-neutral-600">{sublabel}</p>    
         {/if}
     </label>
     <select multiple name={name} class="hidden">
@@ -49,7 +49,7 @@
         {/each}
     </select>
 
-    <div class="relative flex gap-10 items-center h-fit rounded border border-gray-300 shadow-sm pl-4 pr-2 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+    <div class="relative flex gap-10 items-center h-fit rounded border border-gray-300 dark:border-neutral-800 shadow-sm pl-4 pr-2 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
         {#if selectData.length == 0}
             <p>None available</p>
         {:else}
@@ -59,12 +59,12 @@
         {/if}
 
         {#if expanded}
-            <ul transition:slide onmouseleave={() => focused = false} onmouseenter={() => focused = true} class="absolute flex flex-col gap-2 top-[calc(100%+10px)] z-1 left-0 w-full max-h-40 overflow-y-scroll bg-white rounded border border-gray-300 shadow-sm p-2 text-xs">
+            <ul transition:slide onmouseleave={() => focused = false} onmouseenter={() => focused = true} class="absolute flex flex-col gap-2 top-[calc(100%+10px)] z-1 left-0 w-full max-h-40 overflow-y-scroll bg-white dark:bg-neutral-950 rounded border border-gray-300 dark:border-neutral-800 shadow-sm p-2 text-xs">
                 <div class="flex gap-2 items-center">
                     <IconSearch class="text-neutral-400"/>
                     <input type="text" placeholder="Search..." bind:value={search} class="block w-full text-sm !outline-none transition-all duration-300 ease-in-out border-transparent focus:border-b-2 focus:border-indigo-500">
                 </div>
-                <div class="w-full h-px bg-neutral-200"></div>
+                <div class="w-full h-px bg-neutral-200 dark:bg-neutral-700"></div>
                 {#each search ? selectData.filter(d => d.name.toLowerCase().includes(search.toLowerCase())) : selectData as el}
                     <Button Icon={el.selected ? IconMinus : IconPlus} type="button" extra="!p-1 !text-xs !rounded-sm w-full !border-none"  onclick={() => {el.selected = !el.selected}} inverted={!el.selected}>{el.name}</Button>
                 {/each}
diff --git a/src/lib/components/forms/InputText.svelte b/src/lib/components/forms/InputText.svelte
index f262829..fcfc805 100644
--- a/src/lib/components/forms/InputText.svelte
+++ b/src/lib/components/forms/InputText.svelte
@@ -12,9 +12,9 @@
     <label for={name} class="block w-1/3 min-w-[300px]">
         <p>{label}</p>
         {#if sublabel}
-            <p class="text-sm text-neutral-400">{sublabel}</p>    
+            <p class="text-sm text-neutral-400 dark:text-neutral-600">{sublabel}</p>    
         {/if}
     </label>
     <input id={name} name={name} type="text" defaultValue={defaultValue} {...others}
-        class="block h-fit rounded border border-gray-300 shadow-sm px-4 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+        class="block h-fit rounded border border-gray-300 dark:border-neutral-800 shadow-sm px-4 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
 </div>
\ No newline at end of file
diff --git a/src/lib/components/forms/InputToggle.svelte b/src/lib/components/forms/InputToggle.svelte
index fa6088c..c611546 100644
--- a/src/lib/components/forms/InputToggle.svelte
+++ b/src/lib/components/forms/InputToggle.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import IconCheck from "~icons/tabler/check";
+	import IconX from "~icons/tabler/x";
 	import Button from "../ui/Button.svelte";
-    import IconCheck from "~icons/tabler/check";
-    import IconX from "~icons/tabler/x";
 
     let { 
         label,
@@ -17,7 +17,7 @@
     <label for={name} class="block w-1/3 min-w-[300px]">
         <p>{label}</p>
         {#if sublabel.length > 0}
-            <p class="text-sm text-neutral-400">{sublabel}</p>    
+            <p class="text-sm text-neutral-400 dark:text-neutral-600">{sublabel}</p>    
         {/if}
     </label>
 
diff --git a/src/lib/components/resources/ResourceCard.svelte b/src/lib/components/resources/ResourceCard.svelte
index cb65625..5d3c15f 100644
--- a/src/lib/components/resources/ResourceCard.svelte
+++ b/src/lib/components/resources/ResourceCard.svelte
@@ -6,7 +6,7 @@
      } = $props();
 </script>
 
-<div class="flex gap-10 justify-between items-center rounded border border-neutral-200 py-4 px-6 shadow">
+<div class="flex gap-10 justify-between items-center rounded border border-neutral-200 dark:border-neutral-800 py-4 px-6 shadow">
     <div>
         <p class="font-medium">{title}</p>
         <p class="text-neutral-400">{subtitle}</p>
diff --git a/src/lib/components/resources/ResourceEditPage.svelte b/src/lib/components/resources/ResourceEditPage.svelte
index 7fd0415..dd1f34d 100644
--- a/src/lib/components/resources/ResourceEditPage.svelte
+++ b/src/lib/components/resources/ResourceEditPage.svelte
@@ -19,14 +19,14 @@
     });
 </script>
 
-<div class="flex flex-col h-full">
+<div class="flex flex-col h-full text-neutral-700 dark:text-neutral-300">
     <ResourcePageHeader title={heading}>
         <Button Icon={IconChevronLeft} onclick={() => history.back()} inverted>Back</Button>
     </ResourcePageHeader>
     
     <HorizontalSpacer/>
     
-    <div class="text-sm text-neutral-700 flex-1 overflow-scroll">
+    <div class="text-sm flex-1 overflow-scroll">
         {@render children()}
     </div>
 
diff --git a/src/lib/components/resources/ResourceListPage.svelte b/src/lib/components/resources/ResourceListPage.svelte
index 1497fd3..464e59f 100644
--- a/src/lib/components/resources/ResourceListPage.svelte
+++ b/src/lib/components/resources/ResourceListPage.svelte
@@ -9,14 +9,14 @@
     } = $props();
 </script>
 
-<div class="flex flex-col h-full">
+<div class="flex flex-col h-full text-neutral-700 dark:text-neutral-300">
     <ResourcePageHeader title={heading}>
         {@render actionSnippet()}
     </ResourcePageHeader>
     
     <HorizontalSpacer/>
     
-    <div class="text-sm text-neutral-700 flex-1 overflow-scroll">
+    <div class="text-sm flex-1 overflow-scroll">
         {@render contentSnippet()}
     </div>
 </div>
\ No newline at end of file
diff --git a/src/lib/components/ui/Button.svelte b/src/lib/components/ui/Button.svelte
index d857bcc..2545e27 100644
--- a/src/lib/components/ui/Button.svelte
+++ b/src/lib/components/ui/Button.svelte
@@ -24,12 +24,12 @@
         "normal": {
             "danger": "bg-red-500 hover:bg-red-600 text-white border border-transparent",
             "success": "bg-emerald-500 hover:bg-emerald-600 text-white border border-transparent",
-            "primary": "bg-neutral-800 hover:bg-neutral-600 text-white border border-transparent",
+            "primary": "bg-neutral-800 dark:bg-neutral-700 hover:bg-neutral-600 text-white border border-transparent",
         },
         "inverted": {
-            "danger": "bg-white hover:bg-red-100 text-red-500 border border-red-500",
+            "danger": "bg-white dark:bg-black hover:bg-red-100 dark:hover:bg-red-950 text-red-500 border border-red-500",
             "success": "bg-white hover:bg-emerald-100 text-emerald-500 border border-emerald-500",
-            "primary": "bg-white hover:bg-neutral-100 text-neutral-800 border border-neutral-800",
+            "primary": "bg-white dark:bg-neutral-950 hover:bg-neutral-100 dark:hover:bg-neutral-900 text-neutral-800 dark:text-neutral-200 border border-neutral-800",
         },
     };
 
diff --git a/src/lib/components/ui/HorizontalSpacer.svelte b/src/lib/components/ui/HorizontalSpacer.svelte
index 69ebaea..5f97965 100644
--- a/src/lib/components/ui/HorizontalSpacer.svelte
+++ b/src/lib/components/ui/HorizontalSpacer.svelte
@@ -1 +1 @@
-<div class="w-full h-px bg-neutral-200 my-4"></div>
\ No newline at end of file
+<div class="w-full h-px bg-neutral-200 dark:bg-neutral-800 my-4"></div>
\ No newline at end of file
diff --git a/src/routes/dashboard/+layout.svelte b/src/routes/dashboard/+layout.svelte
index 28c5eef..6c9d09c 100644
--- a/src/routes/dashboard/+layout.svelte
+++ b/src/routes/dashboard/+layout.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import IconHome from "~icons/tabler/home";
+	import IconLogout2 from "~icons/tabler/logout2";
 	import IconUsers from "~icons/tabler/users";
 	import IconUsersGroup from "~icons/tabler/users-group";
-	import IconLogout2 from "~icons/tabler/logout2";
 
 	let { children, data } = $props();
 
@@ -30,13 +30,13 @@
 
 <div class="flex min-h-screen overflow-hidden">
 	<!-- Sidebar -->
-	<div id="sidebar" class="h-screen w-64 bg-neutral-100 transform translate-x-0 transition-transform duration-300 ease-in-out z-40 text-neutral-700 text-sm border-r border-neutral-200">
+	<div id="sidebar" class="h-screen w-64 bg-neutral-100 dark:bg-neutral-900 transform translate-x-0 transition-transform duration-300 ease-in-out z-40 text-neutral-700 dark:text-neutral-300 text-sm border-r border-neutral-200 dark:border-neutral-800">
 	  <div class="p-4 flex flex-col h-full">
 		<ul class="flex-1">
 			{#each links as link}
 				{#if data.user.admin || !link.admin}
 					<li class="mb-2">
-						<a class="block flex items-center p-2 bg-transparent hover:bg-neutral-200 transition-all cursor-pointer rounded" href={link.href}>
+						<a class="block flex items-center p-2 bg-transparent hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded" href={link.href}>
 							<link.icon class="mr-2"/>
 							{link.name}
 						</a>
@@ -47,13 +47,13 @@
 
 		<div class="p-2 flex w-full justify-between items-center">
 			<p>Signed in as <span class="underline underline-offset-4">{data.user.name}</span></p>
-			<a data-sveltekit-preload-data="tap" href="/logout" class="block p-2 bg-transparent hover:bg-neutral-200 transition-all cursor-pointer rounded"><IconLogout2/></a>
+			<a data-sveltekit-preload-data="tap" href="/logout" class="block p-2 bg-transparent hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded"><IconLogout2/></a>
 		</div>
 	  </div>
 	</div>
   
 	<!-- Main Content -->
-	<div class="flex-1 p-6 bg-white w-full h-screen">
+	<div class="flex-1 p-6 bg-white dark:bg-neutral-950 w-full h-screen">
 	  {@render children()}
 	</div>
 </div>