From f0eb5441f01db6cc1990d19093f8613a13c7abde Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Wed, 17 Apr 2024 00:20:56 +0000
Subject: [PATCH] Add Nord theme option to theme selection dropdown in
 Navbar.svelte

---
 src/lib/components/Navbar.svelte | 11 ++++++++++-
 src/routes/+layout.svelte        |  2 +-
 src/routes/+page.server.ts       |  2 +-
 tailwind.config.js               |  2 +-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index e5ed5de..386413f 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -8,6 +8,7 @@
   import { onMount } from "svelte";
   import InfoModal from "./InfoModal.svelte";
   import infoIcon from "$lib/assets/info.svg";
+  import type { SubmitFunction } from "@sveltejs/kit";
   async function goHome() {
     goto("/");
   }
@@ -27,6 +28,13 @@
     goto("/worldtravel");
   }
 
+  const submitUpdateTheme: SubmitFunction = ({ action }) => {
+    const theme = action.searchParams.get("theme");
+    if (theme) {
+      document.documentElement.setAttribute("data-theme", theme);
+    }
+  };
+
   let count = 0;
 
   let infoModalOpen = false;
@@ -104,10 +112,11 @@
         tabindex="0"
         class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
       >
-        <form method="POST">
+        <form method="POST" use:enhance={submitUpdateTheme}>
           <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=nord">Nord</button></li> -->
           <!-- <li><button formaction="/?/setTheme&theme=retro">Retro</button></li> -->
           <li><button formaction="/?/setTheme&theme=forest">Forest</button></li>
         </form>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index abcd0fc..22582f2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,8 +2,8 @@
   export let data;
   import Footer from "$lib/components/Footer.svelte";
   import Navbar from "$lib/components/Navbar.svelte";
+  import type { SubmitFunction } from "@sveltejs/kit";
   import "../app.css";
-  // only show footer if scrolled to the bottom
 </script>
 
 <!-- passes the user object to the navbar component -->
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index d63d596..e007790 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -31,7 +31,7 @@ export const actions: Actions = {
   setTheme: async ( { url, cookies }) => {
     const theme = url.searchParams.get("theme");
     // change the theme only if it is one of the allowed themes
-    if (theme && ["light", "dark", "night", "retro", "forest"].includes(theme)) {
+    if (theme && ["light", "dark", "night", "retro", "forest", "nord"].includes(theme)) {
       cookies.set("colortheme", theme, {
         path: "/",
         maxAge: 60 * 60 * 24 * 365,
diff --git a/tailwind.config.js b/tailwind.config.js
index 90ec0e6..f63f6e2 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", "night", "retro", "forest"],
+    themes: ["light", "dark", "night", "retro", "forest", "nord"],
   },
 };