fix: theme reactivity, update ThemeProvider, themeUtils.ts (#1883)

* fix: theme reactivity

* fix: lib/context.ts, docs: pages/theme-provider

* fix: coderabbitai fix

* fix: coderabbitai fix

Author: shinokada

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();