From 5efb2912c0ce91680566d9713ff2d5ab0a8d6913 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Wed, 17 Apr 2024 00:15:27 +0000
Subject: [PATCH] Update theme handling and add theme selection dropdown in
 Navbar.svelte

---
 src/lib/components/AdventureCard.svelte | 8 ++++----
 src/lib/components/Navbar.svelte        | 3 +++
 src/routes/+page.server.ts              | 3 ++-
 src/routes/login/+page.svelte           | 2 +-
 tailwind.config.js                      | 2 +-
 5 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/AdventureCard.svelte b/src/lib/components/AdventureCard.svelte
index c37c1c2..357635d 100644
--- a/src/lib/components/AdventureCard.svelte
+++ b/src/lib/components/AdventureCard.svelte
@@ -40,7 +40,7 @@
 
 {#if type === "mylog"}
   <div
-    class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden"
+    class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
   >
     <div class="card-body">
       <h2 class="card-title overflow-ellipsis">{name}</h2>
@@ -72,7 +72,7 @@
 
 {#if type === "featured"}
   <div
-    class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden"
+    class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
   >
     <div class="card-body">
       <h2 class="card-title overflow-ellipsis">{name}</h2>
@@ -94,7 +94,7 @@
 
 {#if type === "shared"}
   <div
-    class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden"
+    class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
   >
     <div class="card-body">
       <h2 class="card-title overflow-ellipsis">{name}</h2>
@@ -122,7 +122,7 @@
 
 {#if type === "worldtravelregion"}
   <div
-    class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden"
+    class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
   >
     <div class="card-body">
       <h2 class="card-title overflow-ellipsis">{name}</h2>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index e1a9802..e5ed5de 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -107,6 +107,9 @@
         <form method="POST">
           <li><button formaction="/?/setTheme&theme=light">Light</button></li>
           <li><button formaction="/?/setTheme&theme=dark">Dark</button></li>
+          <li><button formaction="/?/setTheme&theme=night">Night</button></li>
+          <!-- <li><button formaction="/?/setTheme&theme=retro">Retro</button></li> -->
+          <li><button formaction="/?/setTheme&theme=forest">Forest</button></li>
         </form>
       </ul>
     </div>
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 35f69e4..d63d596 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -30,7 +30,8 @@ export const actions: Actions = {
   },
   setTheme: async ( { url, cookies }) => {
     const theme = url.searchParams.get("theme");
-    if (theme) {
+    // change the theme only if it is one of the allowed themes
+    if (theme && ["light", "dark", "night", "retro", "forest"].includes(theme)) {
       cookies.set("colortheme", theme, {
         path: "/",
         maxAge: 60 * 60 * 24 * 365,
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index d3d5eed..7c723da 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -55,7 +55,7 @@
 </div>
 
 {#if errors.message}
-  <div class="text-center text-red-500 mt-4">
+  <div class="text-center text-error mt-4">
     {errors.message}
   </div>
 {/if}
diff --git a/tailwind.config.js b/tailwind.config.js
index e17912a..90ec0e6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,6 @@ export default {
   },
   plugins: [require("@tailwindcss/typography"), require("daisyui")],
   daisyui: {
-    themes: ["light", "dark"],
+    themes: ["light", "dark", "night", "retro", "forest"],
   },
 };