diff --git a/src/components/ThemeSelector.astro b/src/components/ThemeSelector.astro
index 815cd46c..d1f33c15 100644
--- a/src/components/ThemeSelector.astro
+++ b/src/components/ThemeSelector.astro
@@ -1,628 +1,158 @@
+---
+
+const themes = [
+      "light",
+      "dark",
+      "cupcake",
+      "bumblebee",
+      "emerald",
+      "corporate",
+      "synthwave",
+      "retro",
+      "cyberpunk",
+      "valentine",
+      "halloween",
+      "garden",
+      "forest",
+      "aqua",
+      "lofi",
+      "pastel",
+      "fantasy",
+      "wireframe",
+      "black",
+      "luxury",
+      "dracula",
+      "cmyk",
+      "autumn",
+      "business",
+      "acid",
+      "lemonade",
+      "night",
+      "coffee",
+      "winter",
+      "dim",
+      "nord",
+      "sunset",
+    ];
+---
+
 <div title="Change Theme" class="dropdown dropdown-end" id="theme-selector">
-  <div tabindex="0" class="btn gap-1 normal-case btn-ghost">
-    <svg
-      width="20"
-      height="20"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      class="inline-block h-5 w-5 stroke-current md:h-6 md:w-6"
-      ><path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
-      ></path>
-    </svg>
-    <span class="hidden md:inline">Theme</span>
-    <svg
-      width="12px"
-      height="12px"
-      class="ml-1 hidden h-3 w-3 fill-current opacity-60 sm:inline-block"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 2048 2048"
-      ><path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
-    </svg>
-  </div>
-  <div
-    class="dropdown-content bg-base-200 text-base-content rounded-t-box rounded-b-box top-px max-h-96 h-[70vh] w-52 overflow-y-auto shadow-2xl mt-16"
-  >
-    <div class="grid grid-cols-1 gap-3 p-3" tabindex="0">
-      <div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2 outline"
-        data-set-theme="light"
-        data-act-class="outline"
-      >
-        <div data-theme="light" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">light</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="dark"
-        data-act-class="outline"
-      >
-        <div data-theme="dark" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">dark</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="cupcake"
-        data-act-class="outline"
-      >
-        <div data-theme="cupcake" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">cupcake</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="bumblebee"
-        data-act-class="outline"
-      >
-        <div data-theme="bumblebee" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">bumblebee</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="emerald"
-        data-act-class="outline"
-      >
-        <div data-theme="emerald" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">emerald</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="corporate"
-        data-act-class="outline"
-      >
-        <div data-theme="corporate" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">corporate</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="synthwave"
-        data-act-class="outline"
-      >
-        <div data-theme="synthwave" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">synthwave</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="retro"
-        data-act-class="outline"
-      >
-        <div data-theme="retro" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">retro</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="cyberpunk"
-        data-act-class="outline"
-      >
-        <div data-theme="cyberpunk" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">cyberpunk</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="valentine"
-        data-act-class="outline"
-      >
-        <div data-theme="valentine" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">valentine</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="halloween"
-        data-act-class="outline"
-      >
-        <div data-theme="halloween" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">halloween</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="garden"
-        data-act-class="outline"
-      >
-        <div data-theme="garden" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">garden</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="forest"
-        data-act-class="outline"
-      >
-        <div data-theme="forest" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">forest</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="aqua"
-        data-act-class="outline"
-      >
-        <div data-theme="aqua" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">aqua</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="lofi"
-        data-act-class="outline"
-      >
-        <div data-theme="lofi" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">lofi</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="pastel"
-        data-act-class="outline"
-      >
-        <div data-theme="pastel" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">pastel</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="fantasy"
-        data-act-class="outline"
-      >
-        <div data-theme="fantasy" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">fantasy</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="wireframe"
-        data-act-class="outline"
-      >
-        <div data-theme="wireframe" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">wireframe</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="black"
-        data-act-class="outline"
-      >
-        <div data-theme="black" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">black</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="luxury"
-        data-act-class="outline"
-      >
-        <div data-theme="luxury" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">luxury</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="dracula"
-        data-act-class="outline"
-      >
-        <div data-theme="dracula" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">dracula</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="cmyk"
-        data-act-class="outline"
-      >
-        <div data-theme="cmyk" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">cmyk</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="autumn"
-        data-act-class="outline"
-      >
-        <div data-theme="autumn" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">autumn</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="business"
-        data-act-class="outline"
-      >
-        <div data-theme="business" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">business</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="acid"
-        data-act-class="outline"
-      >
-        <div data-theme="acid" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">acid</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="lemonade"
-        data-act-class="outline"
-      >
-        <div data-theme="lemonade" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">lemonade</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="night"
-        data-act-class="outline"
-      >
-        <div data-theme="night" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">night</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="coffee"
-        data-act-class="outline"
-      >
-        <div data-theme="coffee" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">coffee</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div><div
-        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
-        data-set-theme="winter"
-        data-act-class="outline"
-      >
-        <div data-theme="winter" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
-          <div class="grid grid-cols-5 grid-rows-3">
-            <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
-              <div class="flex-grow text-sm font-bold">winter</div>
-              <div class="flex flex-shrink-0 flex-wrap gap-1">
-                <div class="bg-primary w-2 rounded"></div>
-                <div class="bg-secondary w-2 rounded"></div>
-                <div class="bg-accent w-2 rounded"></div>
-                <div class="bg-neutral w-2 rounded"></div>
-              </div>
-            </div>
-          </div>
+    <div tabindex="0" class="btn gap-1 normal-case btn-ghost">
+        <svg
+        width="20"
+        height="20"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="inline-block h-5 w-5 stroke-current md:h-6 md:w-6"
+        fill="oklch(var(--b1))"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
+        />
+      </svg>
+        <span class="hidden xl:inline">Theme</span>
+        <svg
+            width="12px"
+            height="12px"
+            class="ml-1 h-3 w-3 fill-current opacity-60 sm:inline-block"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 2048 2048"
+            ><path
+                d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"
+            ></path>
+        </svg>
+    </div>
+    <div
+        class="dropdown-content bg-base-200 text-base-content rounded-t-box rounded-b-box top-px max-h-48 h-[70vh] w-52 overflow-y-auto shadow-2xl mt-16"
+    >
+        <div class="grid grid-cols-1 gap-3 p-3" tabindex="0">
+            {
+                themes.map((theme) => (
+                    <div
+                        class="outline-base-content overflow-hidden rounded-lg outline-2 outline-offset-2"
+                        data-set-theme={theme}
+                        data-act-class="outline"
+                    >
+                        <div
+                            data-theme={theme}
+                            class="bg-base-100 text-base-content w-full cursor-pointer font-sans"
+                        >
+                            <div class="grid grid-cols-5 grid-rows-3">
+                                <div class="col-span-5 row-span-3 row-start-1 flex gap-1 py-3 px-4">
+                                    <div class="flex-grow text-sm">
+                                        {theme}
+                                    </div>
+                                    <div class="flex flex-shrink-0 flex-wrap gap-1">
+                                        <div class="bg-primary w-2 rounded" />
+                                        <div class="bg-secondary w-2 rounded" />
+                                        <div class="bg-accent w-2 rounded" />
+                                        <div class="bg-neutral w-2 rounded" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                ))
+            }
         </div>
-        <a
-          class="outline-base-content overflow-hidden rounded-lg mt-3"
-          href="https://daisyui.com/theme-generator/"
-          target="_blank"
-          ><div class="hover:bg-neutral hover:text-neutral-content w-full cursor-pointer font-sans">
-            <div class="flex gap-2 p-3">
-              <svg
-                width="24"
-                height="24"
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-4 w-4 fill-current"
-                viewBox="0 0 512 512"
-                ><path d="M96,208H48a16,16,0,0,1,0-32H96a16,16,0,0,1,0,32Z"></path><line
-                  x1="90.25"
-                  y1="90.25"
-                  x2="124.19"
-                  y2="124.19"></line><path
-                  d="M124.19,140.19a15.91,15.91,0,0,1-11.31-4.69L78.93,101.56a16,16,0,0,1,22.63-22.63l33.94,33.95a16,16,0,0,1-11.31,27.31Z"
-                ></path><path d="M192,112a16,16,0,0,1-16-16V48a16,16,0,0,1,32,0V96A16,16,0,0,1,192,112Z"></path><line
-                  x1="293.89"
-                  y1="90.25"
-                  x2="259.95"
-                  y2="124.19"></line><path
-                  d="M260,140.19a16,16,0,0,1-11.31-27.31l33.94-33.95a16,16,0,0,1,22.63,22.63L271.27,135.5A15.94,15.94,0,0,1,260,140.19Z"
-                ></path><line x1="124.19" y1="259.95" x2="90.25" y2="293.89"></line><path
-                  d="M90.25,309.89a16,16,0,0,1-11.32-27.31l33.95-33.94a16,16,0,0,1,22.62,22.63l-33.94,33.94A16,16,0,0,1,90.25,309.89Z"
-                ></path><path
-                  d="M219,151.83a26,26,0,0,0-36.77,0l-30.43,30.43a26,26,0,0,0,0,36.77L208.76,276a4,4,0,0,0,5.66,0L276,214.42a4,4,0,0,0,0-5.66Z"
-                ></path><path
-                  d="M472.31,405.11,304.24,237a4,4,0,0,0-5.66,0L237,298.58a4,4,0,0,0,0,5.66L405.12,472.31a26,26,0,0,0,36.76,0l30.43-30.43h0A26,26,0,0,0,472.31,405.11Z"
-                ></path></svg
-              >
-              <div class="flex-grow text-sm font-bold">Make your theme!</div>
-            </div>
-          </div></a
-        >
-      </div>
     </div>
-  </div>
 </div>
 
 <script is:inline>
-  function setTheme(doc) {
-    const theme_selectors = doc.querySelectorAll("#theme-selector div[data-theme]");
-    const theme = window.localStorage.getItem("data-theme");
+    function getSavedTheme() {
+        return window.localStorage.getItem("data-theme") || "lofi";
+    }
 
-    if (theme) {
-      updateTheme(doc, theme);
-    } else {
-      updateTheme(doc, "lofi");
+    function applyOutlineClass(doc, theme) {
+        const themeDivs = doc.querySelectorAll(
+            "#theme-selector div[data-set-theme]",
+        );
+        themeDivs.forEach((div) => {
+            if (div.dataset.setTheme === theme) {
+                div.classList.add("outline");
+            } else {
+                div.classList.remove("outline");
+            }
+        });
     }
-  }
 
-  function updateTheme(doc, newTheme) {
-    doc.querySelector("html").setAttribute("data-theme", newTheme);
-    window.localStorage.setItem("data-theme", newTheme);
-  }
+    function setTheme(doc) {
+        const theme = getSavedTheme();
+        updateTheme(doc, theme);
+        applyOutlineClass(doc, theme);
+    }
 
-  function changeThemeBehavior(doc) {
-    const theme_selectors = doc.querySelectorAll("#theme-selector div[data-theme]");
-    theme_selectors.forEach((selector) => {
-      selector.addEventListener("click", () => {
-        updateTheme(doc, selector.getAttribute("data-theme"));
-      });
-    });
-  }
+    function updateTheme(doc, newTheme) {
+        doc.querySelector("html").setAttribute("data-theme", newTheme);
+        window.localStorage.setItem("data-theme", newTheme);
+    }
+
+    function changeThemeBehavior(doc) {
+        const theme_selectors = doc.querySelectorAll(
+            "#theme-selector div[data-theme]",
+        );
+        theme_selectors.forEach((selector) => {
+            selector.addEventListener("click", () => {
+                const selectedTheme = selector.getAttribute("data-theme");
+                updateTheme(doc, selectedTheme);
+                applyOutlineClass(doc, selectedTheme);
+            });
+        });
+    }
 
-  setTheme(document);
-  changeThemeBehavior(document);
+    setTheme(document);
+    changeThemeBehavior(document);
 
-  document.addEventListener("astro:before-swap", (ev) => {
-    setTheme(ev.newDocument);
-  });
+    document.addEventListener("astro:before-swap", (ev) => {
+        setTheme(ev.newDocument);
+    });
 
-  document.addEventListener("astro:after-swap", () => changeThemeBehavior(document));
+    document.addEventListener("astro:after-swap", () =>
+        changeThemeBehavior(document),
+    );
 </script>