Update theme handling and add theme selection dropdown in Navbar.svelte

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>

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>

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,

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}

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"],
   },
 };