fix: theme reactivity, update ThemeProvider, themeUtils.ts

src/lib/accordion/Accordion.svelte

@@ -9,7 +9,7 @@
 
   let { children, flush, activeClass, inactiveClass, multiple = false, class: className, transitionType, ...restProps }: AccordionProps = $props();
 
-  const theme = getTheme("accordion");
+  const theme = $derived(getTheme("accordion"));
 
   // Simple reactive state object
   const reactiveCtx: AccordionContextType = {

src/lib/accordion/AccordionItem.svelte

@@ -50,7 +50,7 @@
   const useTransition = $derived(transitionType === "none" ? false : ctxTransitionType === "none" ? false : true);
 
   // Theme context
-  const theme = getTheme("accordionItem");
+  const theme = $derived(getTheme("accordionItem"));
 
   // single selection
   const self = Symbol("accordion-item");

src/lib/alert/Alert.svelte

@@ -23,7 +23,7 @@
   }: AlertProps = $props();
 
   // Theme context
-  const theme = getTheme("alert");
+  const theme = $derived(getTheme("alert"));
 
   let divCls = $derived(
     alert({

src/lib/avatar/Avatar.svelte

@@ -8,7 +8,7 @@
   let { children, indicator, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, ...restProps }: AvatarProps = $props();
 
   // Theme context
-  const theme = getTheme("avatar");
+  const theme = $derived(getTheme("avatar"));
 
   let dotProps = $derived(dot ? { placement: "top-right" as const, color: "gray" as const, size: "lg" as const, ...dot } : undefined);
 

src/lib/badge/Badge.svelte

@@ -36,7 +36,7 @@
   const styling = $derived(classes ?? { linkClass: aClass });
 
   // Theme context
-  const theme = getTheme("badge");
+  const theme = $derived(getTheme("badge"));
 
   const { base, linkClass } = $derived(badge({ color, size: large ? "large" : "small", rounded, border }));
 

src/lib/banner/Banner.svelte

@@ -34,7 +34,7 @@
   const styling = $derived(classes ?? { insideDiv: innerClass, dismissable: closeClass });
 
   // Theme context
-  const theme = getTheme("banner");
+  const theme = $derived(getTheme("banner"));
 
   const { base, insideDiv, dismissable: dismissableClass } = $derived(banner({ type, color }));
 

src/lib/bottom-navigation/BottomNav.svelte

@@ -18,7 +18,7 @@
   const styling = $derived(classes ?? { inner: innerClass });
 
   // Theme context
-  const theme = getTheme("bottomNav");
+  const theme = $derived(getTheme("bottomNav"));
 
   const activeCls = $derived(cn("text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900", activeClass));
 

src/lib/bottom-navigation/BottomNavHeader.svelte

@@ -16,7 +16,7 @@
   const styling = $derived(classes ?? { innerDiv: innerClass });
 
   // Theme context
-  const theme = getTheme("bottomNavHeader");
+  const theme = $derived(getTheme("bottomNavHeader"));
 
   const { innerDiv, base } = $derived(bottomNavHeader());
 </script>

src/lib/bottom-navigation/BottomNavHeaderItem.svelte

@@ -7,7 +7,7 @@
   let { itemName, active, class: className, ...restProps }: BottomNavHeaderItemProps = $props();
 
   // Theme context
-  const theme = getTheme("bottomNavHeaderItem");
+  const theme = $derived(getTheme("bottomNavHeaderItem"));
 
   let base = $derived(bottomNavHeaderItem({ active, class: clsx(theme, className) }));
 </script>

src/lib/bottom-navigation/BottomNavItem.svelte

@@ -18,7 +18,7 @@
   const styling = $derived(classes ?? { span: spanClass });
 
   // Theme context
-  const theme = getTheme("bottomNavItem");
+  const theme = $derived(getTheme("bottomNavItem"));
 
   const context = getBottomNavContext();
 

src/lib/breadcrumb/Breadcrumb.svelte

@@ -15,7 +15,7 @@
 
   const styling = $derived(classes ?? { list: olClass });
 
-  const theme = getTheme("breadcrumb");
+  const theme = $derived(getTheme("breadcrumb"));
 
   const { base, list } = $derived(breadcrumb({ solid }));
   let classNav = $derived(base({ class: clsx(theme?.base, className) }));

src/lib/breadcrumb/BreadcrumbItem.svelte

@@ -8,7 +8,7 @@
 
   const styling = $derived(classes ?? {});
 
-  const theme = getTheme("breadcrumbItem");
+  const theme = $derived(getTheme("breadcrumbItem"));
 
   const { base, separator } = $derived(
     breadcrumbItem({

src/lib/button-group/ButtonGroup.svelte

@@ -7,7 +7,7 @@
 
   let { children, size = "md", disabled, class: className, ...restProps }: ButtonGroupProps = $props();
 
-  const theme = getTheme("buttonGroup");
+  const theme = $derived(getTheme("buttonGroup"));
 
   let groupClass = $derived(buttonGroup({ size, class: clsx(theme, className) }));
 

src/lib/buttons/Button.svelte

@@ -25,7 +25,7 @@
     ...restProps
   }: ButtonProps = $props();
 
-  const theme = getTheme("button");
+  const theme = $derived(getTheme("button"));
 
   let actualSize = $derived(group ? "sm" : size);
   let actualColor = $derived(color ?? (group ? (outline ? "dark" : "alternative") : "primary"));

src/lib/buttons/GradientButton.svelte

@@ -10,7 +10,7 @@
 
   let { children, outline, pill, color = "blue", shadow, class: className, href, disabled, size, btnClass, ...restProps }: GradientButtonProps = $props();
 
-  const theme = getTheme("gradientButton");
+  const theme = $derived(getTheme("gradientButton"));
 
   const { base, outlineWrapper } = $derived(gradientButton({ color, outline, pill, shadow, disabled, size, group: !!group }));
 </script>

src/lib/card/Card.svelte

@@ -15,7 +15,7 @@
 
   const styling = $derived(classes ?? { image: imgClass });
 
-  const theme = getTheme("card");
+  const theme = $derived(getTheme("card"));
 
   const { base, image } = $derived(
     card({

src/lib/carousel/Carousel.svelte

@@ -39,7 +39,7 @@
   const styling = $derived(classes ?? { slide: imgClass });
 
   // Theme context
-  const theme = getTheme("carousel");
+  const theme = $derived(getTheme("carousel"));
 
   let { base, slide: slideCls } = $derived(carousel());
 

src/lib/carousel/CarouselIndicators.svelte

@@ -8,7 +8,7 @@
 
   let { children, activeClass, inactiveClass, position = "bottom", class: className, ...restProps }: IndicatorsProps = $props();
 
-  const theme = getTheme("carouselIndicators");
+  const theme = $derived(getTheme("carouselIndicators"));
 
   const _state = getCarouselContext();
   const { base, indicator } = $derived(carouselIndicators({ position }));

src/lib/carousel/ControlButton.svelte

@@ -8,7 +8,7 @@
 
   const { base, span } = $derived(controlButton({ forward }));
 
-  const theme = getTheme("controlButton");
+  const theme = $derived(getTheme("controlButton"));
 </script>
 
 <button type="button" class={base({ class: clsx(className, theme) })} {...restProps}>

src/lib/carousel/Controls.svelte

@@ -7,7 +7,7 @@
 
   let { children, class: className, ...restProps }: ControlsProps = $props();
 
-  const theme = getTheme("controlButton");
+  const theme = $derived(getTheme("controlButton"));
 
   const _state = getCarouselContext();
 

src/lib/carousel/Slide.svelte

@@ -10,7 +10,7 @@
 
   let { image, transition, fit, class: className, ...restProps }: SlideProps = $props();
 
-  const theme = getTheme("slide");
+  const theme = $derived(getTheme("slide"));
 
   let transitionSlideIn = $derived({
     x: _state?.forward ? "100%" : "-100%",

src/lib/carousel/Thumbnail.svelte

@@ -6,7 +6,7 @@
 
   let { selected, class: className, ...restProps }: ThumbnailProps = $props();
 
-  const theme = getTheme("thumbnail");
+  const theme = $derived(getTheme("thumbnail"));
 </script>
 
 <img {...restProps} class={thumbnail({ selected, class: clsx(theme, className) })} />

src/lib/carousel/Thumbnails.svelte

@@ -7,7 +7,7 @@
 
   let { children, images = [], index = $bindable(), ariaLabel = "Click to view image", imgClass, throttleDelay = 650, class: className }: ThumbnailsProps = $props();
 
-  const theme = getTheme("thumbnails");
+  const theme = $derived(getTheme("thumbnails"));
 
   // Initialize so the first click is never throttled
   let lastClickedAt = -Infinity;

src/lib/clipboard-manager/ClipboardManager.svelte

@@ -30,7 +30,7 @@
     detectSensitiveData
   }: ClipboardManagerProps = $props();
 
-  const theme = getTheme("clipboardManager");
+  const theme = $derived(getTheme("clipboardManager"));
 
   const isModal = $derived(open !== undefined);
 

src/lib/clipboard/Clipboard.svelte

@@ -8,7 +8,7 @@
 
   let { children, embedded = false, value = $bindable(""), success = $bindable(false), onclick, class: className = "", ...restProps }: ClipboardProps = $props();
 
-  const theme = getTheme("clipboard");
+  const theme = $derived(getTheme("clipboard"));
 
   const copyToClipboard: MouseEventHandler<HTMLButtonElement> = async (ev) => {
     onclick?.(ev);

src/lib/command-palette/CommandPalette.svelte

@@ -21,7 +21,7 @@
     ...restProps
   }: CommandPaletteProps = $props();
 
-  const theme = getTheme("commandPalette");
+  const theme = $derived(getTheme("commandPalette"));
 
   let search = $state("");
   let selectedIndex = $state(0);

src/lib/context.ts

@@ -74,8 +74,9 @@ export { getListContext, setListContext };
 const [getToolbarContext, setToolbarContext] = createSafeContext<ToolbarContextType>();
 export { getToolbarContext, setToolbarContext };
 
-// Theme
-const [getThemeContext, setThemeContext] = createSafeContext<ThemeConfig>();
+// Theme - use a wrapper type that supports reactive access
+type ThemeContextValue = ThemeConfig | { value?: ThemeConfig };
+const [getThemeContext, setThemeContext] = createSafeContext<ThemeContextValue>();
 export { getThemeContext, setThemeContext };
 
 // ListGroup

src/lib/darkmode/DarkMode.svelte

@@ -7,7 +7,7 @@
   // const THEME_PREFERENCE_KEY = 'color-theme';
   let { class: className, lightIcon, darkIcon, size = "md", ariaLabel = "Dark mode", ...restProps }: DarkmodeProps = $props();
 
-  const theme = getTheme("darkmode");
+  const theme = $derived(getTheme("darkmode"));
 
   const sizes = {
     sm: "w-4 h-4",

src/lib/datepicker/Datepicker.svelte

@@ -45,7 +45,7 @@
     inputProps = {}
   }: DatepickerProps = $props();
 
-  const theme = getTheme("datepicker");
+  const theme = $derived(getTheme("datepicker"));
 
   // If translationLocale is not explicitly provided, it will default to the value of locale. This ensures reactivity as both are directly exposed as props.
   const finalTranslationLocale = $derived(translationLocale ?? locale);

src/lib/drawer/Drawer.svelte

@@ -64,7 +64,7 @@
   });
   // end
 
-  const theme = getTheme("drawer");
+  const theme = $derived(getTheme("drawer"));
 
   let shifted = $state(true);
 

src/lib/drawer/DrawerHandle.svelte

@@ -9,7 +9,7 @@
 
   const ctx = getDrawerContext();
 
-  const theme = getTheme("drawerhandle");
+  const theme = $derived(getTheme("drawerhandle"));
   let { base, handle } = $derived(drawerhandle({ placement: placement ?? ctx?.placement ?? "left" }));
 </script>
 

src/lib/drawer/Drawerhead.svelte

@@ -15,7 +15,7 @@
 
   const styling = $derived(classes ?? { button: buttonClass, svg: svgClass });
 
-  const theme = getTheme("drawer");
+  const theme = $derived(getTheme("drawer"));
 
   const { base, button, svg } = $derived(drawerhead());
 </script>

src/lib/dropdown/Dropdown.svelte

@@ -9,7 +9,7 @@
 
   let { children, simple = false, placement = "bottom", offset = 2, class: className, activeUrl = "", isOpen = $bindable(false), onclose, ...restProps }: DropdownProps = $props();
 
-  const theme = getTheme("dropdown");
+  const theme = $derived(getTheme("dropdown"));
 
   const base = $derived(dropdown({ class: clsx(theme, className) }));
 

src/lib/dropdown/DropdownDivider.svelte

@@ -6,7 +6,7 @@
 
   let { class: className, ...restProps }: DropdownDividerProps = $props();
 
-  const theme = getTheme("dropdownDivider");
+  const theme = $derived(getTheme("dropdownDivider"));
 </script>
 
 <div {...restProps} class={dropdownDivider({ class: clsx(theme, className) })}></div>

src/lib/dropdown/DropdownGroup.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, ...restProps }: DropdownGroupProps = $props();
 
-  const theme = getTheme("dropdownGroup");
+  const theme = $derived(getTheme("dropdownGroup"));
 </script>
 
 <ul {...restProps} class={dropdownGroup({ class: clsx(theme, className) })}>

src/lib/dropdown/DropdownHeader.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, ...restProps }: DropdownHeaderProps = $props();
 
-  const theme = getTheme("dropdownHeader");
+  const theme = $derived(getTheme("dropdownHeader"));
 </script>
 
 <div {...restProps} class={dropdownHeader({ class: clsx(theme, className) })}>

src/lib/dropdown/DropdownItem.svelte

@@ -16,7 +16,7 @@
 
   const styling = $derived(classes ?? { active: activeClass, li: liClass });
 
-  const theme = getTheme("dropdownItem");
+  const theme = $derived(getTheme("dropdownItem"));
 
   const ctx = getDropdownContext();
 

src/lib/footer/Footer.svelte

@@ -6,7 +6,7 @@
 
   let { children, footerType = "default", class: className, ...restProps }: FooterProps = $props();
 
-  const theme = getTheme("footer");
+  const theme = $derived(getTheme("footer"));
 
   const footerCls = $derived(footer({ footerType, class: clsx(theme, className) }));
 </script>

src/lib/footer/FooterBrand.svelte

@@ -6,7 +6,7 @@
 
   let { children, aClass, spanClass, imgClass, href, src, alt, name, ...restProps }: FooterBrandProps = $props();
 
-  const theme = getTheme("footerBrand");
+  const theme = $derived(getTheme("footerBrand"));
 
   const { base, span, img } = $derived(footerBrand());
 </script>

src/lib/footer/FooterCopyright.svelte

@@ -17,7 +17,7 @@
   // link, bySpan
   const styling = $derived(classes ?? { bySpan: bySpanClass, link: aClass });
 
-  const theme = getTheme("footerCopyright");
+  const theme = $derived(getTheme("footerCopyright"));
 
   const effectiveYear = $derived(year ?? new SvelteDate().getFullYear());
 

src/lib/footer/FooterIcon.svelte

@@ -6,7 +6,7 @@
 
   let { children, href, ariaLabel, class: className, ...restProps }: FooterIconProps = $props();
 
-  const theme = getTheme("footerIcon");
+  const theme = $derived(getTheme("footerIcon"));
 </script>
 
 {#if href}

src/lib/footer/FooterLink.svelte

@@ -16,7 +16,7 @@
   // link, bySpan
   const styling = $derived(classes ?? { link: aClass });
 
-  const theme = getTheme("footerLink");
+  const theme = $derived(getTheme("footerLink"));
 
   const { base, link } = footerLink();
 </script>

src/lib/footer/FooterLinkGroup.svelte

@@ -6,7 +6,7 @@
 
   let { class: className, children, ...restProps }: FooterLinkGroupProps = $props();
 
-  const theme = getTheme("footerLinkGroup");
+  const theme = $derived(getTheme("footerLinkGroup"));
 </script>
 
 <ul {...restProps} class={footerLinkGroup({ class: clsx(theme, className) })}>

src/lib/forms/button-toggle/ButtonToggle.svelte

@@ -19,7 +19,7 @@
   // button(className), content, text, icon
   const styling = $derived(classes ?? { icon: iconClass, text: txtClass, content: contentClass });
 
-  const theme = getTheme("buttonToggle");
+  const theme = $derived(getTheme("buttonToggle"));
 
   // Get context - it will be undefined if used outside ButtonToggleGroup
   const ctx = getButtonToggleContext();