version-2 part 4

src/lib/darkmode/theme.ts

@@ -1,5 +1,5 @@
 import { tv } from "tailwind-variants";
 
 export const darkmode = tv({
-  base: "inline-flex hover:text-heading items-center justify-center text-body w-10 h-10 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2"
+  base: "inline-flex hover:text-heading items-center justify-center text-body w-8 h-8 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-base text-sm p-2"
 });

src/lib/index.ts

@@ -5,6 +5,7 @@ export * from "./utils";
 // export { default as ThemeProvider } from "./theme/ThemeProvider.svelte";
 export * from "./theme";
 export { getTheme } from "./theme/themeUtils";
+export * from "./theme-selector";
 // components
 export * from "./accordion";
 export * from "./alert";

src/routes/utils/ThemeSelector.svelte → src/lib/theme-selector/ThemeSelector.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { getCurrentTheme, getSelectedTheme, themes, loadTheme } from "./themeStore.svelte";
+  import { getCurrentTheme, getSelectedTheme, themeConfigs, loadTheme } from "./themeStore.svelte";
   import { onMount } from "svelte";
   import { Button, Dropdown, DropdownItem } from "$lib";
-  import { PaletteOutline } from "flowbite-svelte-icons";
 
   // Access the reactive state
   let currentTheme = $derived(getCurrentTheme());
@@ -24,20 +23,28 @@
 <Button
   onclick={() => (isOpen = true)}
   color="gray"
-  class="gap-2 rounded-xl border-0 px-1.5 py-1.5 shadow-none focus:ring-gray-100 dark:focus:ring-gray-700"
+  class="gap-2 rounded-sm border-0 px-1 py-1 shadow-none focus:ring-gray-100 dark:focus:ring-gray-700"
   aria-haspopup="true"
   aria-expanded={isOpen}
   aria-label="Select Theme"
 >
-  <PaletteOutline class="h-6 w-6" />
+  <svg class="h-4.5 w-4.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+    <path
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M12 7h.01m3.486 1.513h.01m-6.978 0h.01M6.99 12H7m9 4h2.706a1.957 1.957 0 0 0 1.883-1.325A9 9 0 1 0 3.043 12.89 9.1 9.1 0 0 0 8.2 20.1a8.62 8.62 0 0 0 3.769.9 2.013 2.013 0 0 0 2.03-2v-.857A2.036 2.036 0 0 1 16 16Z"
+    ></path>
+  </svg>
   <span>{selectedTheme?.name ?? "Theme"}</span>
 </Button>
 <Dropdown class="w-52 px-2" bind:isOpen simple>
-  {#each themes as theme}
+  {#each themeConfigs as theme (theme.id)}
     <DropdownItem onclick={handleThemeChange(theme.id)} class="mb-1 inline-flex w-full items-center justify-between rounded-xl {theme.id === currentTheme ? 'bg-brand-50 dark:bg-brand-900/20' : ''}">
       <span class="theme-select-button inline-flex w-full items-center justify-between rounded">{theme.name}</span>
       <div class="flex items-center rounded-xs">
-        {#each theme.colors as color, index}
+        {#each theme.colors as color, index (color)}
           <div class="h-3.5 w-[1.125rem] {color} {index === 0 ? 'rounded-s-xs' : ''} {index === theme.colors.length - 1 ? 'rounded-e-xs' : ''}"></div>
         {/each}
       </div>

src/lib/theme-selector/index.ts

@@ -0,0 +1,4 @@
+export { default as ThemeSelector } from "./ThemeSelector.svelte";
+export { loadTheme, getCurrentTheme, getSelectedTheme, themeConfigs } from "./themeStore.svelte";
+export type { FlowbiteTheme, ThemeId } from "./themes";
+export * from "./theme";

src/lib/theme-selector/theme.ts

@@ -0,0 +1,40 @@
+import { tv, type VariantProps } from "tailwind-variants";
+import type { Classes } from "$lib/theme/themeUtils";
+
+// Variants
+export type ThemeSelectorVariants = VariantProps<typeof themeSelector> & Classes<typeof themeSelector>;
+
+export const themeSelector = tv({
+  slots: {
+    button: "gap-2 rounded-sm border-0 px-1 py-1 shadow-none focus:ring-gray-100 dark:focus:ring-gray-700",
+    dropdown: "w-52 px-2",
+    item: "mb-1 inline-flex w-full items-center justify-between rounded-xl",
+    itemLabel: "theme-select-button inline-flex w-full items-center justify-between rounded",
+    colorSwatchContainer: "flex items-center rounded-xs",
+    colorSwatch: "h-3.5 w-[1.125rem]"
+  },
+  variants: {
+    active: {
+      true: {
+        item: "bg-brand-50 dark:bg-brand-900/20"
+      },
+      false: {
+        item: ""
+      }
+    },
+    swatchPosition: {
+      first: {
+        colorSwatch: "rounded-s-xs"
+      },
+      middle: {
+        colorSwatch: ""
+      },
+      last: {
+        colorSwatch: "rounded-e-xs"
+      }
+    }
+  },
+  defaultVariants: {
+    active: false
+  }
+});

src/routes/utils/themeStore.svelte.ts → src/lib/theme-selector/themeStore.svelte.ts

@@ -1,52 +1,6 @@
 import { browser } from "$app/environment";
 import { dev } from "$app/environment";
-
-export type ThemeId = "default" | "minimal" | "enterprise" | "playful" | "mono";
-export interface Theme {
-  id: ThemeId;
-  name: string;
-  cssPath: string;
-  fontUrl: string;
-  colors: string[];
-}
-
-const themes: Theme[] = [
-  {
-    id: "default",
-    name: "Default",
-    cssPath: "/themes/default-runtime.css",
-    fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap",
-    colors: ["bg-gray-100 dark:bg-gray-700", "bg-blue-50 dark:bg-blue-900", "bg-blue-200 dark:bg-blue-800", "bg-blue-700 dark:bg-blue-700"]
-  },
-  {
-    id: "minimal",
-    name: "Minimal",
-    cssPath: "/themes/minimal-runtime.css",
-    fontUrl: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap",
-    colors: ["bg-stone-50 dark:bg-stone-600", "bg-stone-100 dark:bg-stone-700", "bg-stone-300 dark:bg-stone-800", "bg-stone-900 dark:bg-stone-900"]
-  },
-  {
-    id: "enterprise",
-    name: "Enterprise",
-    cssPath: "/themes/enterprise-runtime.css",
-    fontUrl: "https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap",
-    colors: ["bg-zinc-100 dark:bg-zinc-700", "bg-cyan-50 dark:bg-cyan-900", "bg-cyan-100 dark:bg-cyan-800", "bg-cyan-700 dark:bg-cyan-700"]
-  },
-  {
-    id: "playful",
-    name: "Playful",
-    cssPath: "/themes/playful-runtime.css",
-    fontUrl: "https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap",
-    colors: ["bg-slate-100 dark:bg-slate-700", "bg-pink-50 dark:bg-pink-900", "bg-pink-100 dark:bg-pink-800", "bg-pink-700 dark:bg-pink-700"]
-  },
-  {
-    id: "mono",
-    name: "Mono",
-    cssPath: "/themes/mono-runtime.css",
-    fontUrl: "https://fonts.googleapis.com/css2?family=Google+Sans+Code:wght@300;400;500;600;700&display=swap",
-    colors: ["bg-neutral-100 dark:bg-neutral-700", "bg-indigo-50 dark:bg-indigo-900", "bg-indigo-100 dark:bg-indigo-800", "bg-indigo-700 dark:bg-indigo-700"]
-  }
-];
+import { themeConfigs, type FlowbiteTheme, type ThemeId } from "./themes";
 
 const getInitialTheme = (): string => {
   if (browser) {
@@ -64,12 +18,12 @@ const getInitialTheme = (): string => {
 let currentTheme = $state<string>(getInitialTheme());
 
 // Using $derived for computed value
-let selectedTheme = $derived<Theme | undefined>(themes.find((t) => t.id === currentTheme));
+let selectedTheme = $derived<FlowbiteTheme | undefined>(themeConfigs.find((t) => t.id === currentTheme));
 
 export function loadTheme(themeId: string): void {
   if (!browser) return;
 
-  const theme = themes.find((t) => t.id === themeId);
+  const theme = themeConfigs.find((t) => t.id === themeId);
   if (!theme) {
     console.error(`Theme ${themeId} not found`);
     return;
@@ -133,8 +87,9 @@ export function getCurrentTheme(): string {
   return currentTheme;
 }
 
-export function getSelectedTheme(): Theme | undefined {
+export function getSelectedTheme(): FlowbiteTheme | undefined {
   return selectedTheme;
 }
 
-export { themes };
+export { themeConfigs };
+export type { FlowbiteTheme, ThemeId };

src/lib/theme-selector/themes.ts

@@ -0,0 +1,47 @@
+export type ThemeId = "default" | "minimal" | "enterprise" | "playful" | "mono";
+
+export interface FlowbiteTheme {
+  id: ThemeId;
+  name: string;
+  cssPath: string;
+  fontUrl: string;
+  colors: string[];
+}
+
+export const themeConfigs: FlowbiteTheme[] = [
+  {
+    id: "default",
+    name: "Default",
+    cssPath: "/themes/default-runtime.css",
+    fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap",
+    colors: ["bg-gray-100 dark:bg-gray-700", "bg-blue-50 dark:bg-blue-900", "bg-blue-200 dark:bg-blue-800", "bg-blue-700 dark:bg-blue-700"]
+  },
+  {
+    id: "minimal",
+    name: "Minimal",
+    cssPath: "/themes/minimal-runtime.css",
+    fontUrl: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap",
+    colors: ["bg-stone-50 dark:bg-stone-600", "bg-stone-100 dark:bg-stone-700", "bg-stone-300 dark:bg-stone-800", "bg-stone-900 dark:bg-stone-900"]
+  },
+  {
+    id: "enterprise",
+    name: "Enterprise",
+    cssPath: "/themes/enterprise-runtime.css",
+    fontUrl: "https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap",
+    colors: ["bg-zinc-100 dark:bg-zinc-700", "bg-cyan-50 dark:bg-cyan-900", "bg-cyan-100 dark:bg-cyan-800", "bg-cyan-700 dark:bg-cyan-700"]
+  },
+  {
+    id: "playful",
+    name: "Playful",
+    cssPath: "/themes/playful-runtime.css",
+    fontUrl: "https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap",
+    colors: ["bg-slate-100 dark:bg-slate-700", "bg-pink-50 dark:bg-pink-900", "bg-pink-100 dark:bg-pink-800", "bg-pink-700 dark:bg-pink-700"]
+  },
+  {
+    id: "mono",
+    name: "Mono",
+    cssPath: "/themes/mono-runtime.css",
+    fontUrl: "https://fonts.googleapis.com/css2?family=Google+Sans+Code:wght@300;400;500;600;700&display=swap",
+    colors: ["bg-neutral-100 dark:bg-neutral-700", "bg-indigo-50 dark:bg-indigo-900", "bg-indigo-100 dark:bg-indigo-800", "bg-indigo-700 dark:bg-indigo-700"]
+  }
+];

src/lib/toolbar/theme.ts

@@ -14,7 +14,7 @@ export const toolbar = tv({
     embedded: {
       true: {},
       false: {
-        base: "py-2 px-3 rounded-lg dark:border"
+        base: "py-2 px-3 rounded-base dark:border"
       }
     },
     color: {

src/routes/+layout.svelte

@@ -3,7 +3,7 @@
   import FathomAnalytics from "./utils/FathomAnalytics.svelte";
   import CarbonAds from "./utils/CarbonAds.svelte";
   import { onMount } from "svelte";
-  import { loadTheme, getCurrentTheme } from "./utils/themeStore.svelte";
+  import { loadTheme, getCurrentTheme } from "$lib";
 
   let { children, data } = $props();