Add themes page

src/lib/components/CardButton.svelte

@@ -11,7 +11,7 @@
   <div class="flex gap-6 py-4 flex-grow items-center">
     <Icon class="bg-accent" size={7} {icon} />
     <div class="flex flex-col gap-1 flex-grow">
-      <p class="text-stark-content">{title}</p>
+      <p class="text-bold">{title}</p>
       <p class="text-xs"><slot /></p>
     </div>
     <Icon size={7} icon="alt-arrow-right" />

src/lib/components/Field.svelte

@@ -3,7 +3,7 @@
     <slot name="label" />
   </label>
   <slot name="input" />
-  <p class="text-sm text-neutral-200">
+  <p class="text-sm">
     <slot name="info" />
   </p>
 </div>

src/lib/components/PrimaryNavItem.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import Button from "@lib/components/Button.svelte"
 
-  export let title
+  export let title = ""
 </script>
 
 <Button on:click class="relative z-nav-item flex h-14 w-14 items-center justify-center">
   <div
-    class="avatar tooltip tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
+    class="avatar tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
+    class:tooltip={title}
     data-tip={title}>
     <slot />
   </div>

src/lib/components/SecondaryNavItem.svelte

@@ -8,8 +8,8 @@
 
 <a
   {href}
-  class="group justify-start border-none transition-all hover:bg-base-100"
-  class:text-stark-content={active}
+  class="group justify-start border-none transition-all hover:bg-base-100 hover:text-base-content"
+  class:text-base-content={active}
   class:bg-base-100={active}>
   <div class="flex items-center gap-3">
     <slot />