fix: theme reactivity, update ThemeProvider, themeUtils.ts#1883
fix: theme reactivity, update ThemeProvider, themeUtils.ts#1883shinokada merged 4 commits intothemesberg:mainfrom
Conversation
|
@shinokada is attempting to deploy a commit to the Themesberg Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis PR makes theme provisioning stable and reactive: ThemeProvider now sets a stable context wrapper with a getter, theme resolution unwraps value-bearing configs, and most components switch from direct getTheme(...) to reactive $derived(getTheme(...)). Documentation and a reactive ThemeProvider example were added. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant ThemeReactive as ThemeReactive (example)
participant ThemeProvider as ThemeProvider
participant ThemeContext as ThemeContext (stable getter)
participant getTheme as getTheme(...)
participant Derived as $derived(getTheme(...))
participant Component as UI Component
User->>ThemeReactive: change color or width
ThemeReactive->>ThemeReactive: update local state & derive currentTheme
ThemeReactive->>ThemeProvider: bind updated currentTheme
ThemeProvider->>ThemeContext: set stable context object (getter)
Component->>ThemeContext: getTheme("componentKey")
Component->>getTheme: obtain ThemeContextValue
Component->>Derived: wrap with $derived(getTheme(...))
Derived-->>Component: provide reactive theme value
Component->>Component: recompute classes/render
Component-->>User: render updated UI
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/lib/typography/a/A.svelte (1)
24-27: FixbuttonPropsderivation to use$derived.by().The current code creates a derived value that is a function, not the filtered props object. In Svelte 5, multi-statement derived values require
$derived.by()instead of$derived(). This means line 32's{...buttonProps}would spread a function rather than the intended props.Apply this diff to fix the issue:
- let buttonProps = $derived(() => { + let buttonProps = $derived.by(() => { const { href, target, rel, download, ...filtered } = restProps; return filtered; });src/routes/docs/pages/theme-provider.md (1)
128-128: Typo: Period should be comma.There's a typo in the import type list.
ButtonTheme, - CardTheme. + CardTheme, // ...
🧹 Nitpick comments (1)
src/lib/split-pane/Divider.svelte (1)
10-11: Consider renaming for clarity.The variable
themePaneretrieves the"divider"theme, which is inconsistent. Consider renaming tothemeDividerfor better clarity and maintainability.- const themePane = $derived(getTheme("divider")); + const themeDivider = $derived(getTheme("divider")); const themeDividerHitArea = $derived(getTheme("dividerHitArea"));And update the usage on line 28:
- class={divider({ direction, isDragging, class: clsx(themePane, className) })} + class={divider({ direction, isDragging, class: clsx(themeDivider, className) })}
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (97)
src/lib/context.ts(1 hunks)src/lib/forms/tags/Tags.svelte(1 hunks)src/lib/forms/textarea/Textarea.svelte(1 hunks)src/lib/forms/timepicker/Timepicker.svelte(1 hunks)src/lib/forms/toggle/Toggle.svelte(1 hunks)src/lib/gallery/Gallery.svelte(1 hunks)src/lib/indicator/Indicator.svelte(1 hunks)src/lib/kanban/KanbanBoard.svelte(1 hunks)src/lib/kanban/KanbanCard.svelte(1 hunks)src/lib/kbd/Kbd.svelte(1 hunks)src/lib/list-group/Listgroup.svelte(1 hunks)src/lib/list-group/ListgroupItem.svelte(1 hunks)src/lib/mega-menu/MegaMenu.svelte(1 hunks)src/lib/modal/Modal.svelte(1 hunks)src/lib/navbar/NavBrand.svelte(1 hunks)src/lib/navbar/NavContainer.svelte(1 hunks)src/lib/navbar/NavHamburger.svelte(1 hunks)src/lib/navbar/NavLi.svelte(1 hunks)src/lib/navbar/NavUl.svelte(1 hunks)src/lib/navbar/Navbar.svelte(1 hunks)src/lib/pagination/Pagination.svelte(1 hunks)src/lib/pagination/PaginationButton.svelte(1 hunks)src/lib/pagination/PaginationItem.svelte(1 hunks)src/lib/pagination/PaginationNav.svelte(1 hunks)src/lib/popover/Popover.svelte(1 hunks)src/lib/progress/Progressbar.svelte(1 hunks)src/lib/progress/Progressradial.svelte(1 hunks)src/lib/rating/AdvancedRating.svelte(1 hunks)src/lib/rating/Rating.svelte(1 hunks)src/lib/rating/Review.svelte(1 hunks)src/lib/rating/ScoreRating.svelte(1 hunks)src/lib/scroll-spy/ScrollSpy.svelte(1 hunks)src/lib/sidebar/Sidebar.svelte(1 hunks)src/lib/sidebar/SidebarBrand.svelte(1 hunks)src/lib/sidebar/SidebarButton.svelte(1 hunks)src/lib/sidebar/SidebarCta.svelte(1 hunks)src/lib/sidebar/SidebarDropdownWrapper.svelte(1 hunks)src/lib/skeleton/CardPlaceholder.svelte(1 hunks)src/lib/skeleton/ImagePlaceholder.svelte(1 hunks)src/lib/skeleton/ListPlaceholder.svelte(1 hunks)src/lib/skeleton/Skeleton.svelte(1 hunks)src/lib/skeleton/TestimonialPlaceholder.svelte(1 hunks)src/lib/skeleton/TextPlaceholder.svelte(1 hunks)src/lib/skeleton/VideoPlaceholder.svelte(1 hunks)src/lib/skeleton/WidgetPlaceholder.svelte(1 hunks)src/lib/speed-dial/SpeedDial.svelte(1 hunks)src/lib/speed-dial/SpeedDialButton.svelte(1 hunks)src/lib/spinner/Spinner.svelte(1 hunks)src/lib/split-pane/Divider.svelte(1 hunks)src/lib/split-pane/Pane.svelte(1 hunks)src/lib/split-pane/SplitPane.svelte(1 hunks)src/lib/step-indicator/StepIndicator.svelte(1 hunks)src/lib/stepper/BreadcrumbStepper.svelte(1 hunks)src/lib/stepper/DetailedStepper.svelte(1 hunks)src/lib/stepper/ProgressStepper.svelte(1 hunks)src/lib/stepper/Stepper.svelte(1 hunks)src/lib/stepper/TimelineStepper.svelte(1 hunks)src/lib/stepper/VerticalStepper.svelte(1 hunks)src/lib/table/Table.svelte(1 hunks)src/lib/table/TableBodyCell.svelte(1 hunks)src/lib/table/TableBodyRow.svelte(1 hunks)src/lib/table/TableHead.svelte(1 hunks)src/lib/table/TableHeadCell.svelte(1 hunks)src/lib/table/TableSearch.svelte(1 hunks)src/lib/tabs/TabItem.svelte(1 hunks)src/lib/theme/ThemeProvider.svelte(1 hunks)src/lib/theme/index.ts(0 hunks)src/lib/theme/themeUtils.ts(1 hunks)src/lib/timeline/Activity.svelte(1 hunks)src/lib/timeline/ActivityItem.svelte(1 hunks)src/lib/timeline/Group.svelte(1 hunks)src/lib/timeline/GroupItem.svelte(1 hunks)src/lib/timeline/Timeline.svelte(1 hunks)src/lib/timeline/TimelineItem.svelte(1 hunks)src/lib/toast/Toast.svelte(1 hunks)src/lib/toast/ToastContainer.svelte(1 hunks)src/lib/toolbar/Toolbar.svelte(1 hunks)src/lib/toolbar/ToolbarButton.svelte(1 hunks)src/lib/toolbar/ToolbarGroup.svelte(1 hunks)src/lib/tour/Tour.svelte(1 hunks)src/lib/typography/a/A.svelte(1 hunks)src/lib/typography/blockquote/Blockquote.svelte(1 hunks)src/lib/typography/descriptionlist/DescriptionList.svelte(1 hunks)src/lib/typography/heading/Heading.svelte(1 hunks)src/lib/typography/hr/Hr.svelte(1 hunks)src/lib/typography/img/Img.svelte(1 hunks)src/lib/typography/layout/Layout.svelte(1 hunks)src/lib/typography/list/List.svelte(1 hunks)src/lib/typography/mark/Mark.svelte(1 hunks)src/lib/typography/paragraph/P.svelte(1 hunks)src/lib/typography/secondary/Secondary.svelte(1 hunks)src/lib/typography/span/Span.svelte(1 hunks)src/lib/video/Video.svelte(1 hunks)src/lib/virtual-masonry/VirtualMasonry.svelte(1 hunks)src/lib/virtuallist/VirtualList.svelte(1 hunks)src/routes/docs-examples/pages/theme-provider/ThemeReactive.svelte(1 hunks)src/routes/docs/pages/theme-provider.md(2 hunks)
💤 Files with no reviewable changes (1)
- src/lib/theme/index.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- src/lib/theme/themeUtils.ts
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{svelte,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{svelte,ts,tsx,js,jsx}: Use the Flowbite-Svelte MCP server to discover components by name or category before implementing UI components
Always use findComponent tool FIRST to locate the correct Flowbite-Svelte component before fetching documentation
After calling findComponent, use getComponentDoc tool to fetch complete documentation including usage examples, props, and best practices for Flowbite-Svelte components
Files:
src/lib/table/TableBodyRow.sveltesrc/lib/skeleton/ImagePlaceholder.sveltesrc/lib/pagination/Pagination.sveltesrc/lib/forms/timepicker/Timepicker.sveltesrc/lib/context.tssrc/lib/table/TableBodyCell.sveltesrc/lib/virtual-masonry/VirtualMasonry.sveltesrc/lib/split-pane/Divider.sveltesrc/lib/typography/span/Span.sveltesrc/lib/speed-dial/SpeedDial.sveltesrc/lib/rating/Rating.sveltesrc/lib/scroll-spy/ScrollSpy.sveltesrc/lib/sidebar/SidebarDropdownWrapper.sveltesrc/lib/kanban/KanbanBoard.sveltesrc/lib/indicator/Indicator.sveltesrc/lib/stepper/BreadcrumbStepper.sveltesrc/lib/toolbar/Toolbar.sveltesrc/lib/video/Video.sveltesrc/lib/typography/blockquote/Blockquote.sveltesrc/lib/spinner/Spinner.sveltesrc/lib/skeleton/TextPlaceholder.sveltesrc/lib/stepper/DetailedStepper.sveltesrc/lib/typography/hr/Hr.sveltesrc/routes/docs-examples/pages/theme-provider/ThemeReactive.sveltesrc/lib/table/TableHead.sveltesrc/lib/toolbar/ToolbarGroup.sveltesrc/lib/timeline/TimelineItem.sveltesrc/lib/navbar/NavHamburger.sveltesrc/lib/typography/paragraph/P.sveltesrc/lib/timeline/GroupItem.sveltesrc/lib/rating/Review.sveltesrc/lib/skeleton/Skeleton.sveltesrc/lib/stepper/ProgressStepper.sveltesrc/lib/table/TableSearch.sveltesrc/lib/modal/Modal.sveltesrc/lib/progress/Progressradial.sveltesrc/lib/tour/Tour.sveltesrc/lib/stepper/VerticalStepper.sveltesrc/lib/progress/Progressbar.sveltesrc/lib/skeleton/CardPlaceholder.sveltesrc/lib/skeleton/WidgetPlaceholder.sveltesrc/lib/stepper/TimelineStepper.sveltesrc/lib/step-indicator/StepIndicator.sveltesrc/lib/forms/tags/Tags.sveltesrc/lib/forms/toggle/Toggle.sveltesrc/lib/toast/Toast.sveltesrc/lib/list-group/Listgroup.sveltesrc/lib/sidebar/Sidebar.sveltesrc/lib/skeleton/TestimonialPlaceholder.sveltesrc/lib/skeleton/ListPlaceholder.sveltesrc/lib/pagination/PaginationNav.sveltesrc/lib/navbar/NavBrand.sveltesrc/lib/skeleton/VideoPlaceholder.sveltesrc/lib/sidebar/SidebarBrand.sveltesrc/lib/theme/ThemeProvider.sveltesrc/lib/timeline/ActivityItem.sveltesrc/lib/table/TableHeadCell.sveltesrc/lib/navbar/NavLi.sveltesrc/lib/popover/Popover.sveltesrc/lib/speed-dial/SpeedDialButton.sveltesrc/lib/typography/descriptionlist/DescriptionList.sveltesrc/lib/virtuallist/VirtualList.sveltesrc/lib/navbar/NavContainer.sveltesrc/lib/split-pane/SplitPane.sveltesrc/lib/kbd/Kbd.sveltesrc/lib/typography/a/A.sveltesrc/lib/sidebar/SidebarCta.sveltesrc/lib/typography/list/List.sveltesrc/lib/typography/mark/Mark.sveltesrc/lib/typography/heading/Heading.sveltesrc/lib/pagination/PaginationButton.sveltesrc/lib/rating/ScoreRating.sveltesrc/lib/stepper/Stepper.sveltesrc/lib/navbar/Navbar.sveltesrc/lib/list-group/ListgroupItem.sveltesrc/lib/toolbar/ToolbarButton.sveltesrc/lib/table/Table.sveltesrc/lib/timeline/Group.sveltesrc/lib/mega-menu/MegaMenu.sveltesrc/lib/forms/textarea/Textarea.sveltesrc/lib/tabs/TabItem.sveltesrc/lib/typography/layout/Layout.sveltesrc/lib/navbar/NavUl.sveltesrc/lib/kanban/KanbanCard.sveltesrc/lib/rating/AdvancedRating.sveltesrc/lib/timeline/Activity.sveltesrc/lib/split-pane/Pane.sveltesrc/lib/typography/img/Img.sveltesrc/lib/gallery/Gallery.sveltesrc/lib/toast/ToastContainer.sveltesrc/lib/sidebar/SidebarButton.sveltesrc/lib/typography/secondary/Secondary.sveltesrc/lib/timeline/Timeline.sveltesrc/lib/pagination/PaginationItem.svelte
🧠 Learnings (7)
📓 Common learnings
Learnt from: shinokada
Repo: themesberg/flowbite-svelte PR: 1882
File: src/lib/bottom-navigation/BottomNavHeaderItem.svelte:9-9
Timestamp: 2025-12-16T13:21:19.575Z
Learning: In flowbite-svelte, when using ThemeProvider with reactive themes, `getTheme("componentName")` calls must be placed inside `$derived()` expressions (not at module scope) to ensure components react to dynamic theme changes. This pattern is intentional for reactive theming support.
📚 Learning: 2025-12-16T13:21:19.575Z
Learnt from: shinokada
Repo: themesberg/flowbite-svelte PR: 1882
File: src/lib/bottom-navigation/BottomNavHeaderItem.svelte:9-9
Timestamp: 2025-12-16T13:21:19.575Z
Learning: When using ThemeProvider with reactive themes in Flowbite-Svelte, ensure that getTheme("componentName") calls are placed inside a $derived() expression (not at module scope) so components react to dynamic theme changes. This applies broadly to Svelte components in this repo that rely on theme-derived values. For example:
// bad: at module scope
const theme = getTheme("button");
// good: inside a derived store
import { derived } from 'svelte/store';
const themeDerived = derived(themeProviderStore, ($themeProvider) => getTheme("button"));
// use $themeDerived in template/component
Applied to files:
src/lib/table/TableBodyRow.sveltesrc/lib/skeleton/ImagePlaceholder.sveltesrc/lib/pagination/Pagination.sveltesrc/lib/forms/timepicker/Timepicker.sveltesrc/lib/table/TableBodyCell.sveltesrc/lib/virtual-masonry/VirtualMasonry.sveltesrc/lib/split-pane/Divider.sveltesrc/lib/typography/span/Span.sveltesrc/lib/speed-dial/SpeedDial.sveltesrc/lib/rating/Rating.sveltesrc/lib/scroll-spy/ScrollSpy.sveltesrc/lib/sidebar/SidebarDropdownWrapper.sveltesrc/lib/kanban/KanbanBoard.sveltesrc/lib/indicator/Indicator.sveltesrc/lib/stepper/BreadcrumbStepper.sveltesrc/lib/toolbar/Toolbar.sveltesrc/lib/video/Video.sveltesrc/lib/typography/blockquote/Blockquote.sveltesrc/lib/spinner/Spinner.sveltesrc/lib/skeleton/TextPlaceholder.sveltesrc/lib/stepper/DetailedStepper.sveltesrc/lib/typography/hr/Hr.sveltesrc/routes/docs-examples/pages/theme-provider/ThemeReactive.sveltesrc/lib/table/TableHead.sveltesrc/lib/toolbar/ToolbarGroup.sveltesrc/lib/timeline/TimelineItem.sveltesrc/lib/navbar/NavHamburger.sveltesrc/lib/typography/paragraph/P.sveltesrc/lib/timeline/GroupItem.sveltesrc/lib/rating/Review.sveltesrc/lib/skeleton/Skeleton.sveltesrc/lib/stepper/ProgressStepper.sveltesrc/lib/table/TableSearch.sveltesrc/lib/modal/Modal.sveltesrc/lib/progress/Progressradial.sveltesrc/lib/tour/Tour.sveltesrc/lib/stepper/VerticalStepper.sveltesrc/lib/progress/Progressbar.sveltesrc/lib/skeleton/CardPlaceholder.sveltesrc/lib/skeleton/WidgetPlaceholder.sveltesrc/lib/stepper/TimelineStepper.sveltesrc/lib/step-indicator/StepIndicator.sveltesrc/lib/forms/tags/Tags.sveltesrc/lib/forms/toggle/Toggle.sveltesrc/lib/toast/Toast.sveltesrc/lib/list-group/Listgroup.sveltesrc/lib/sidebar/Sidebar.sveltesrc/lib/skeleton/TestimonialPlaceholder.sveltesrc/lib/skeleton/ListPlaceholder.sveltesrc/lib/pagination/PaginationNav.sveltesrc/lib/navbar/NavBrand.sveltesrc/lib/skeleton/VideoPlaceholder.sveltesrc/lib/sidebar/SidebarBrand.sveltesrc/lib/theme/ThemeProvider.sveltesrc/lib/timeline/ActivityItem.sveltesrc/lib/table/TableHeadCell.sveltesrc/lib/navbar/NavLi.sveltesrc/lib/popover/Popover.sveltesrc/lib/speed-dial/SpeedDialButton.sveltesrc/lib/typography/descriptionlist/DescriptionList.sveltesrc/lib/virtuallist/VirtualList.sveltesrc/lib/navbar/NavContainer.sveltesrc/lib/split-pane/SplitPane.sveltesrc/lib/kbd/Kbd.sveltesrc/lib/typography/a/A.sveltesrc/lib/sidebar/SidebarCta.sveltesrc/lib/typography/list/List.sveltesrc/lib/typography/mark/Mark.sveltesrc/lib/typography/heading/Heading.sveltesrc/lib/pagination/PaginationButton.sveltesrc/lib/rating/ScoreRating.sveltesrc/lib/stepper/Stepper.sveltesrc/lib/navbar/Navbar.sveltesrc/lib/list-group/ListgroupItem.sveltesrc/lib/toolbar/ToolbarButton.sveltesrc/lib/table/Table.sveltesrc/lib/timeline/Group.sveltesrc/lib/mega-menu/MegaMenu.sveltesrc/lib/forms/textarea/Textarea.sveltesrc/lib/tabs/TabItem.sveltesrc/lib/typography/layout/Layout.sveltesrc/lib/navbar/NavUl.sveltesrc/lib/kanban/KanbanCard.sveltesrc/lib/rating/AdvancedRating.sveltesrc/lib/timeline/Activity.sveltesrc/lib/split-pane/Pane.sveltesrc/lib/typography/img/Img.sveltesrc/lib/gallery/Gallery.sveltesrc/lib/toast/ToastContainer.sveltesrc/lib/sidebar/SidebarButton.sveltesrc/lib/typography/secondary/Secondary.sveltesrc/lib/timeline/Timeline.sveltesrc/lib/pagination/PaginationItem.svelte
📚 Learning: 2024-10-18T09:38:03.879Z
Learnt from: Chizaruu
Repo: themesberg/flowbite-svelte PR: 1465
File: src/lib/forms/Timepicker.svelte:105-116
Timestamp: 2024-10-18T09:38:03.879Z
Learning: In `Timepicker.svelte`, the `Dropdown` opens as intended and is used exclusively with the 'dropdown' and 'timerange-dropdown' Timepicker types.
Applied to files:
src/lib/forms/timepicker/Timepicker.svelte
📚 Learning: 2025-12-16T13:21:19.575Z
Learnt from: shinokada
Repo: themesberg/flowbite-svelte PR: 1882
File: src/lib/bottom-navigation/BottomNavHeaderItem.svelte:9-9
Timestamp: 2025-12-16T13:21:19.575Z
Learning: In flowbite-svelte, when using ThemeProvider with reactive themes, `getTheme("componentName")` calls must be placed inside `$derived()` expressions (not at module scope) to ensure components react to dynamic theme changes. This pattern is intentional for reactive theming support.
Applied to files:
src/lib/context.tssrc/routes/docs/pages/theme-provider.md
📚 Learning: 2025-11-25T07:26:46.504Z
Learnt from: CR
Repo: themesberg/flowbite-svelte PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T07:26:46.504Z
Learning: Applies to **/*.{svelte,ts,tsx,js,jsx} : Use the Flowbite-Svelte MCP server to discover components by name or category before implementing UI components
Applied to files:
src/routes/docs-examples/pages/theme-provider/ThemeReactive.svelte
📚 Learning: 2025-11-25T07:26:46.504Z
Learnt from: CR
Repo: themesberg/flowbite-svelte PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T07:26:46.504Z
Learning: Applies to **/*.{svelte,ts,tsx,js,jsx} : After calling findComponent, use getComponentDoc tool to fetch complete documentation including usage examples, props, and best practices for Flowbite-Svelte components
Applied to files:
src/routes/docs-examples/pages/theme-provider/ThemeReactive.svelte
📚 Learning: 2024-11-22T08:37:27.996Z
Learnt from: mrh1997
Repo: themesberg/flowbite-svelte PR: 1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In `src/lib/utils/Popper.svelte`, inconsistencies in event handling (e.g., using both `mouseenter`/`mouseleave` and `pointerenter`/`pointerleave`) may be intentional to minimize modifications and reduce the risk of new problems.
Applied to files:
src/lib/popover/Popover.svelte
🧬 Code graph analysis (1)
src/lib/context.ts (2)
src/lib/theme/index.ts (1)
ThemeConfig(5-7)src/lib/types.ts (1)
ThemeConfig(1896-1896)
🔇 Additional comments (97)
src/lib/typography/paragraph/P.svelte (1)
22-22: LGTM! Reactive theme pattern correctly applied.The theme retrieval is now properly wrapped in
$derived()to enable reactive theme switching. This ensures the paragraph component will automatically update when the theme changes via ThemeProvider.Based on learnings, this pattern is the correct approach for reactive theming in Flowbite-Svelte.
src/lib/typography/layout/Layout.svelte (1)
9-9: LGTM! Correct implementation of reactive theme pattern.The use of
$derived(getTheme("layout"))ensures the component automatically reacts to dynamic theme changes from ThemeProvider. This aligns with the PR's objective to fix theme reactivity.Based on learnings, this pattern is required for components to respond to theme updates at runtime.
src/lib/forms/timepicker/Timepicker.svelte (1)
43-43: LGTM! Theme reactivity correctly implemented.The change wraps
getTheme("timepicker")in$derived()to enable automatic reactivity when the theme provider updates dynamically. This follows the established pattern for reactive theme support in Flowbite-Svelte.Based on learnings, this pattern ensures components react to dynamic theme changes when using ThemeProvider.
src/lib/kbd/Kbd.svelte (1)
9-9: LGTM! Reactive theme pattern correctly implemented.The use of
$derived(getTheme("kbd"))ensures the component reactively responds to theme changes from ThemeProvider. This aligns with the PR's objective to fix theme reactivity throughout the library.Based on learnings, this pattern is essential for reactive theming support in Flowbite-Svelte.
src/lib/typography/blockquote/Blockquote.svelte (1)
9-9: LGTM! Correct reactive theme pattern.The use of
$derived()to wrapgetTheme("blockquote")ensures the component reacts to dynamic theme changes, which is the intended behavior for ThemeProvider integration. This pattern aligns with the project-wide theme reactivity refactor.Based on learnings, this is the correct approach for reactive theming in Flowbite-Svelte.
src/lib/typography/descriptionlist/DescriptionList.svelte (1)
9-9: LGTM! Correctly implements reactive theme pattern.The use of
$derived(getTheme("descriptionList"))ensures the component automatically reacts to theme changes. This aligns with the repository-wide refactoring for reactive theming support.Based on learnings, this pattern is required when using ThemeProvider with dynamic themes.
src/lib/tabs/TabItem.svelte (1)
11-11: LGTM! Correct reactive theme implementation.The change correctly wraps
getTheme("tabItem")with$derived()to ensure the component reacts to dynamic theme changes. This follows the established pattern for reactive theming in flowbite-svelte and aligns with the PR's objective.Based on learnings, this pattern is required to ensure components react to theme updates when using ThemeProvider.
src/lib/skeleton/TextPlaceholder.svelte (1)
9-9: LGTM! Correctly implements reactive theming pattern.The change to wrap
getTheme("textPlaceholder")in$derived()ensures the component reacts to dynamic theme changes from ThemeProvider. This aligns with the established pattern for reactive theming in this codebase.Based on learnings, this pattern is intentional and required for proper theme reactivity.
src/lib/typography/mark/Mark.svelte (1)
9-9: LGTM! Correct reactive theming pattern.The use of
$derived(getTheme("mark"))ensures the Mark component automatically reacts to dynamic theme changes from ThemeProvider. This aligns with the project-wide migration to reactive theming using Svelte 5 runes.Based on learnings, this pattern is intentional and required for reactive theme support.
src/lib/typography/a/A.svelte (1)
9-9: LGTM! Reactive theme pattern correctly implemented.The change to wrap
getTheme("anchor")in$derived()ensures the component automatically reacts to theme changes, which aligns with the PR objectives to enable reactive theming throughout the library.src/lib/stepper/ProgressStepper.svelte (1)
34-34: LGTM! Reactive theme implementation.The change to
$derived(getTheme("progressStepper"))enables automatic reactivity when the theme changes via ThemeProvider. This aligns with the project-wide refactor for reactive theming.Based on learnings, this is the correct pattern for reactive theme support in flowbite-svelte.
src/lib/typography/hr/Hr.svelte (1)
26-26: LGTM! Reactive theme implementation.The change to
$derived(getTheme("hr"))enables automatic reactivity when the theme changes via ThemeProvider, consistent with the broader refactor across the codebase.Based on learnings, this pattern ensures components react to dynamic theme changes.
src/lib/kanban/KanbanCard.svelte (1)
9-9: LGTM! Reactive theme implementation.The change to
$derived(getTheme("kanbanCard"))enables automatic reactivity for theme changes, following the established pattern for reactive theming support.Based on learnings, this ensures the component reacts to dynamic theme changes when using ThemeProvider.
src/lib/sidebar/SidebarBrand.svelte (1)
23-23: LGTM! Reactive theme implementation.The change to
$derived(getTheme("sidebarBrand"))enables automatic reactivity for theme changes via ThemeProvider, consistent with the project-wide refactor.Based on learnings, this pattern is intentional for reactive theming support.
src/lib/progress/Progressradial.svelte (1)
27-27: LGTM! Reactive theme implementation.The change to
$derived(getTheme("progressradial"))enables automatic reactivity when the theme changes, following the established pattern for reactive theming across the codebase.Based on learnings, getTheme() calls must be placed inside $derived() expressions for reactive theme support.
src/lib/modal/Modal.svelte (1)
42-42: LGTM! Reactive theme implementation.The change to
$derived(getTheme("modal"))enables automatic reactivity for theme changes via ThemeProvider, aligning with the project-wide reactive theming refactor.Based on learnings, this ensures the modal component reacts to dynamic theme changes when using ThemeProvider.
src/lib/tour/Tour.svelte (1)
26-26: LGTM! Reactive theme implementation.The change to
$derived(getTheme("tour"))enables automatic reactivity when the theme changes, consistent with the established pattern for reactive theming support across the project.Based on learnings, this pattern ensures components react to dynamic theme changes when using ThemeProvider.
src/lib/kanban/KanbanBoard.svelte (1)
18-18: LGTM! Reactive theme implementation.The change to
$derived(getTheme("kanbanBoard"))enables automatic reactivity for theme changes via ThemeProvider, following the established pattern for reactive theming.Based on learnings, getTheme() calls must be placed inside $derived() expressions to ensure components react to dynamic theme changes.
src/lib/split-pane/SplitPane.svelte (1)
43-43: LGTM - Correct reactive theming pattern.The theme is now properly wrapped in
$derived(), enabling reactivity when the ThemeProvider context changes. This aligns with the established pattern for reactive theming across the codebase.Based on learnings, this ensures components react to dynamic theme changes.
src/lib/virtual-masonry/VirtualMasonry.svelte (1)
22-22: LGTM - Correct reactive theming pattern.The theme is now properly wrapped in
$derived(), enabling reactivity when the ThemeProvider context changes.Based on learnings, this ensures components react to dynamic theme changes.
src/lib/pagination/PaginationNav.svelte (1)
43-43: LGTM - Correct reactive theming pattern.The theme is now properly wrapped in
$derived(), enabling reactivity when the ThemeProvider context changes.Based on learnings, this ensures components react to dynamic theme changes.
src/lib/typography/secondary/Secondary.svelte (1)
9-9: LGTM - Correct reactive theming pattern.The theme is now properly wrapped in
$derived(), enabling reactivity when the ThemeProvider context changes.Based on learnings, this ensures components react to dynamic theme changes.
src/lib/speed-dial/SpeedDialButton.svelte (1)
40-40: LGTM - Correct reactive theming pattern.The theme is now properly wrapped in
$derived(), enabling reactivity when the ThemeProvider context changes.Based on learnings, this ensures components react to dynamic theme changes.
src/lib/sidebar/SidebarButton.svelte (1)
9-9: LGTM - Correct reactive theming pattern.The theme is now properly wrapped in
$derived(), enabling reactivity when the ThemeProvider context changes.Based on learnings, this ensures components react to dynamic theme changes.
src/lib/typography/span/Span.svelte (1)
9-9: LGTM - Correct reactive theming pattern.The theme is now properly wrapped in
$derived(), enabling reactivity when the ThemeProvider context changes.Based on learnings, this ensures components react to dynamic theme changes.
src/lib/stepper/TimelineStepper.svelte (1)
18-18: LGTM - Correct reactive theming pattern.The theme is now properly wrapped in
$derived(), enabling reactivity when the ThemeProvider context changes.Based on learnings, this ensures components react to dynamic theme changes.
src/lib/split-pane/Pane.svelte (1)
11-11: LGTM! Reactive theme pattern correctly implemented.The theme is now reactive to ThemeProvider changes via
$derived(getTheme("pane")). This aligns with the PR's systematic refactor to enable dynamic theming across all components.src/lib/forms/toggle/Toggle.svelte (1)
19-19: LGTM! Reactive theme pattern correctly implemented.The theme retrieval now uses
$derived(getTheme("toggle"))for reactive theme updates, consistent with the PR's theming refactor.src/lib/typography/img/Img.svelte (1)
24-24: LGTM! Reactive theme pattern correctly implemented.The theme now derives reactively via
$derived(getTheme("img")), enabling dynamic theme switching without any changes to the component's rendering logic.src/lib/stepper/VerticalStepper.svelte (1)
17-17: LGTM! Reactive theme pattern correctly implemented.The theme is now reactive via
$derived(getTheme("verticalStepper")), consistent with the PR's systematic theming refactor.src/lib/skeleton/ImagePlaceholder.svelte (1)
9-9: LGTM! Reactive theme pattern correctly implemented.The theme now uses
$derived(getTheme("imagePlaceholder"))for reactive theming, aligning with the PR's objectives.src/lib/skeleton/WidgetPlaceholder.svelte (1)
9-9: LGTM! Reactive theme pattern correctly implemented.The theme now derives reactively via
$derived(getTheme("widgetPlaceholder")), enabling dynamic theme updates.src/lib/rating/Rating.svelte (1)
19-19: LGTM! Reactive theme pattern correctly implemented.The theme is now reactive via
$derived(getTheme("rating")), consistent with the PR's systematic refactor for dynamic theming.src/lib/skeleton/CardPlaceholder.svelte (1)
9-9: LGTM! Reactive theme pattern correctly implemented.The theme now uses
$derived(getTheme("cardPlaceholder"))for reactive theming, completing the consistent pattern across all reviewed components.src/lib/progress/Progressbar.svelte (1)
24-24: Reactive theme implementation looks correct.The change to
$derived(getTheme("progressbar"))enables the component to react to dynamic theme changes from ThemeProvider. This aligns with the reactive theming pattern established across the codebase.Based on learnings,
getTheme()calls must be inside$derived()for theme reactivity.src/lib/table/TableBodyCell.svelte (1)
9-9: Reactive theme implementation is correct.The derived theme store enables dynamic theme updates. The implementation follows the established pattern for reactive theming.
Based on learnings, this pattern ensures components react to theme changes from ThemeProvider.
src/lib/sidebar/Sidebar.svelte (1)
52-52: Reactive theme correctly implemented.The derived theme store ensures all theme usages throughout this complex component (lines 84, 87, 113, 115, 126, 129, 135, 136) will reactively update when the theme changes.
Based on learnings, this enables dynamic theme switching via ThemeProvider.
src/lib/table/TableHead.svelte (1)
11-11: Reactive theme properly integrated.The theme is correctly set as a derived value and properly flows into the
basederived expression on line 19, establishing a complete reactivity chain.Based on learnings, this pattern enables theme reactivity throughout the component.
src/lib/forms/textarea/Textarea.svelte (1)
52-52: Reactive theme correctly implemented for complex form component.The derived theme store enables reactive updates across all theme usages (lines 72, 76, 78, 82, 84, 88, 91, 98) for wrapper, header, footer, and addon elements.
Based on learnings, this ensures the textarea responds to dynamic theme changes.
src/lib/stepper/Stepper.svelte (1)
17-17: Reactive theme implementation is correct.The derived theme enables reactive updates across all stepper elements (lines 67, 74, 83, 95), ensuring consistent styling when themes change dynamically.
Based on learnings, this aligns with the reactive theming pattern used throughout the PR.
src/lib/forms/tags/Tags.svelte (1)
46-46: Reactive theme correctly integrated.The derived theme store ensures reactive styling updates for all tag elements (lines 174, 178, 179, 182), supporting dynamic theme switching in this interactive form component.
Based on learnings, this pattern is required for theme reactivity with ThemeProvider.
src/lib/pagination/PaginationButton.svelte (1)
10-10: Reactive theme properly established.The derived theme correctly feeds into the
paginationClsderived expression (lines 23, 34), maintaining reactivity through the conditional active state logic.Based on learnings, this ensures pagination buttons react to theme changes from ThemeProvider.
src/lib/rating/ScoreRating.svelte (1)
9-9: LGTM!The reactive theme pattern using
$derived(getTheme("scoreRating"))correctly enables the component to react to dynamic theme changes from the ThemeProvider. Based on learnings, this is the expected pattern for reactive theming in flowbite-svelte.src/lib/table/TableSearch.svelte (1)
49-49: LGTM!The derived theme pattern is correctly implemented, enabling reactive theme updates. The component properly uses optional chaining when accessing theme properties.
src/lib/popover/Popover.svelte (1)
31-31: LGTM!Correct reactive theming implementation using
$derived(getTheme("popover")). The pattern aligns with the project-wide shift to derived theme values.src/lib/toolbar/Toolbar.svelte (1)
10-10: LGTM!The derived theme pattern is correctly applied, enabling reactive theme updates for the Toolbar component.
src/lib/skeleton/ListPlaceholder.svelte (1)
9-9: LGTM!Correct reactive theming pattern. The component will now properly respond to theme changes from ThemeProvider.
src/lib/sidebar/SidebarCta.svelte (1)
23-23: LGTM!The reactive theme pattern is correctly implemented for SidebarCta, following the project-wide convention for derived theme values.
src/lib/table/TableBodyRow.svelte (1)
10-19: No action required—theme usage is correct.The theme is passed directly to
clsx()becausetableBodyRowis defined without slots in thetv()function. When a component has no slots,getTheme()returns aClassValuedirectly rather than an object with properties. This pattern matchesTableBodyCelland other slot-less components. Components with slots (liketableortableSearch) correctly use property access (e.g.,theme?.div) because they receive theme objects. The implementation is consistent and intentional.Likely an incorrect or invalid review comment.
src/lib/pagination/Pagination.svelte (1)
11-11: LGTM! Reactive theming pattern correctly applied.The theme is now sourced as a reactive derived value, enabling automatic updates when the theme changes via ThemeProvider. This change aligns with the project-wide migration to reactive theming.
src/lib/toolbar/ToolbarGroup.svelte (1)
10-10: LGTM! Reactive theming pattern correctly applied.The theme is now sourced as a reactive derived value, enabling automatic updates when the theme changes via ThemeProvider. This change aligns with the project-wide migration to reactive theming.
src/lib/rating/Review.svelte (1)
28-28: LGTM! Reactive theming pattern correctly applied.The theme is now sourced as a reactive derived value, enabling automatic updates when the theme changes via ThemeProvider. This change aligns with the project-wide migration to reactive theming.
src/lib/scroll-spy/ScrollSpy.svelte (1)
24-24: LGTM! Reactive theming pattern correctly applied.The theme (named
stylesin this component) is now sourced as a reactive derived value, enabling automatic updates when the theme changes via ThemeProvider. This change aligns with the project-wide migration to reactive theming.src/lib/skeleton/VideoPlaceholder.svelte (1)
9-9: LGTM! Reactive theming pattern correctly applied.The theme is now sourced as a reactive derived value, enabling automatic updates when the theme changes via ThemeProvider. This change aligns with the project-wide migration to reactive theming.
src/lib/spinner/Spinner.svelte (1)
9-9: LGTM! Reactive theming pattern correctly applied.The theme is now sourced as a reactive derived value, enabling automatic updates when the theme changes via ThemeProvider. This change aligns with the project-wide migration to reactive theming.
src/lib/navbar/NavLi.svelte (1)
13-13: LGTM! Reactive theming pattern correctly applied.The theme is now sourced as a reactive derived value, enabling automatic updates when the theme changes via ThemeProvider. This change aligns with the project-wide migration to reactive theming.
src/lib/toast/ToastContainer.svelte (1)
9-9: LGTM! Reactive theming pattern correctly applied.The theme is now sourced as a reactive derived value, enabling automatic updates when the theme changes via ThemeProvider. This change aligns with the project-wide migration to reactive theming.
src/lib/timeline/ActivityItem.svelte (1)
37-37: Reactive theme pattern correctly implemented.The change to wrap
getTheme("activityItem")in$derived()correctly implements reactive theming, ensuring the component automatically updates when themes change dynamically via ThemeProvider. Based on learnings, this pattern is required for reactive theme support in Flowbite-Svelte.src/lib/timeline/Group.svelte (1)
25-25: Reactive theme derivation correctly applied.The
$derived(getTheme("group"))pattern enables automatic reactivity for theme changes. This aligns with the systematic refactoring across the codebase for reactive theming support.src/lib/timeline/GroupItem.svelte (1)
31-31: LGTM - Reactive theming applied correctly.The derived theme store implementation is correct and consistent with the PR's reactive theming migration.
src/lib/toolbar/ToolbarButton.svelte (1)
9-9: Reactive theme implementation is correct.The
$derived(getTheme("toolbarButton"))correctly enables reactive theme updates for the toolbar button component.src/lib/mega-menu/MegaMenu.svelte (1)
18-18: Reactive theme pattern correctly implemented.The derived theme store enables dynamic theme switching for the megamenu component, aligning with the broader reactive theming refactoring in this PR.
src/lib/step-indicator/StepIndicator.svelte (1)
23-23: Reactive theming correctly applied.The
$derived(getTheme("stepIndicator"))implementation correctly enables reactive theme updates. The downstream type casting toStepIndicatorThememaintains proper type safety throughout the component.src/lib/navbar/NavHamburger.svelte (1)
22-22: LGTM - Reactive theme derivation is correct.The change enables reactive theme updates for the navbar hamburger component, consistent with the systematic theming refactoring across all components.
src/lib/navbar/NavUl.svelte (1)
38-38: Reactive theming correctly implemented.The
$derived(getTheme("navbarUl"))pattern correctly enables reactive theme updates. The theme value is properly used in the$effectblock (lines 67-68), which will automatically react to theme changes.src/lib/speed-dial/SpeedDial.svelte (1)
36-36: LGTM! Theme reactivity implemented correctly.The theme is now wrapped in
$derived(), enabling reactive updates when the theme changes dynamically via ThemeProvider. This aligns with the project-wide pattern for reactive theming.Based on learnings, this pattern ensures components react to dynamic theme changes when using ThemeProvider.
src/lib/stepper/DetailedStepper.svelte (1)
16-16: LGTM! Consistent reactive theming pattern.The derived theme pattern is correctly applied, matching the approach used throughout the codebase for reactive theme support.
src/lib/typography/heading/Heading.svelte (1)
9-9: LGTM! Reactive theme correctly integrated.The theme is properly wrapped in
$derived()and consumed in theheadingClscomputation, enabling reactive theme updates.src/lib/timeline/TimelineItem.svelte (1)
49-49: LGTM! Theme reactivity properly applied.The derived theme pattern is correctly implemented, consistent with the broader theming refactor across timeline components.
src/lib/theme/ThemeProvider.svelte (1)
13-24: LGTM! Elegant reactive pattern for Svelte 5.The stable object with a reactive getter is a clean solution for theme reactivity:
- The getter tracks accesses within child components'
$derived()expressions- Svelte 5 automatically re-runs those derived computations when the
themeprop changes- The stable object reference prevents unnecessary context updates
This pattern elegantly enables the reactive theming throughout the component library while maintaining a simple, declarative API.
src/lib/navbar/NavBrand.svelte (1)
9-9: LGTM! Reactive theming correctly applied.The derived theme pattern is properly implemented, enabling dynamic theme updates for navbar branding.
src/lib/virtuallist/VirtualList.svelte (1)
21-21: LGTM! Theme reactivity properly integrated.The derived theme pattern is correctly applied, consistent with the project-wide reactive theming refactor.
src/lib/timeline/Activity.svelte (1)
9-9: LGTM! Reactive theme pattern correctly applied.The derived theme implementation is consistent with the reactive theming approach used throughout the codebase.
src/lib/stepper/BreadcrumbStepper.svelte (1)
17-17: LGTM: Reactive theme implementation.The derived theme pattern correctly enables reactive theming for BreadcrumbStepper. Based on learnings, this ensures the component responds to dynamic theme changes.
src/lib/rating/AdvancedRating.svelte (1)
25-25: LGTM: Reactive theme implementation.The derived theme pattern correctly enables reactive theming. Based on learnings, this ensures the component responds to dynamic theme changes.
src/lib/navbar/Navbar.svelte (1)
11-11: LGTM: Reactive theme implementation.The derived theme pattern correctly enables reactive theming. Based on learnings, this ensures the component responds to dynamic theme changes.
src/lib/table/TableHeadCell.svelte (1)
9-9: LGTM: Reactive theme implementation.The derived theme pattern correctly enables reactive theming. Based on learnings, this ensures the component responds to dynamic theme changes.
src/lib/table/Table.svelte (1)
24-24: LGTM: Reactive theme implementation.The derived theme pattern correctly enables reactive theming. Based on learnings, this ensures the component responds to dynamic theme changes.
src/lib/skeleton/TestimonialPlaceholder.svelte (1)
9-9: LGTM: Reactive theme implementation.The derived theme pattern correctly enables reactive theming. Based on learnings, this ensures the component responds to dynamic theme changes.
src/lib/skeleton/Skeleton.svelte (1)
9-9: LGTM: Reactive theme implementation.The derived theme pattern correctly enables reactive theming. Based on learnings, this ensures the component responds to dynamic theme changes.
src/lib/video/Video.svelte (1)
8-8: Update getTheme to use video theme instead of span.The Video component currently uses
getTheme("span"), which is semantically incorrect. The Span component is a typography element for text styling (italic, underline, gradient highlights), whereas a video element has different styling requirements. A dedicated "video" theme should be created and used instead, or an appropriate fallback theme should be selected if video-specific theming is not yet implemented.src/lib/list-group/ListgroupItem.svelte (1)
10-10: LGTM! Correct reactive theme implementation.The theme retrieval now uses
$derived(getTheme("listGroupItem")), which enables the component to automatically react to dynamic theme changes when using ThemeProvider. This aligns with the established pattern for reactive theming.src/lib/toast/Toast.svelte (1)
44-44: LGTM! Reactive theme implementation is correct.The theme is now retrieved using
$derived(getTheme("toast")), enabling automatic updates when the theme changes dynamically via ThemeProvider.src/lib/typography/list/List.svelte (1)
10-10: LGTM! Theme reactivity correctly implemented.The change to
$derived(getTheme("list"))ensures the List component responds to dynamic theme updates.src/lib/list-group/Listgroup.svelte (1)
11-11: LGTM! Reactive theming correctly applied.The theme retrieval now uses
$derived(getTheme("listGroup"))for automatic reactivity to theme changes.src/lib/navbar/NavContainer.svelte (1)
9-9: LGTM! Theme reactivity correctly implemented.The change to
$derived(getTheme("navbarContainer"))enables reactive theme updates for this component.src/lib/context.ts (1)
77-79: LGTM! Infrastructure update enables reactive theming.The introduction of
ThemeContextValueas a union type (ThemeConfig | { value?: ThemeConfig }) allows the theme context to support both direct theme configs and wrapper objects with getters. This is the foundational change that enables components to use$derived(getTheme(...))for reactive theme updates.The type union maintains backward compatibility while adding support for the new reactive pattern.
src/lib/timeline/Timeline.svelte (1)
10-10: LGTM! Reactive theme implementation is correct.The theme now uses
$derived(getTheme("timeline"))to enable automatic updates when themes change dynamically.src/lib/indicator/Indicator.svelte (1)
9-9: LGTM! Theme reactivity correctly implemented.The change to
$derived(getTheme("indicator"))ensures the Indicator component responds to dynamic theme changes.src/lib/gallery/Gallery.svelte (1)
18-18: LGTM! Correct reactive theming pattern.The
$derived(getTheme("gallery"))pattern correctly enables reactive theme updates, consistent with the project-wide theming refactor. Based on learnings, this placement inside$derived()ensures the component reacts to dynamic theme changes.src/lib/sidebar/SidebarDropdownWrapper.svelte (1)
45-45: LGTM! Reactive theming correctly applied.The
$derived(getTheme("sidebarDropdownWrapper"))pattern enables reactive theme updates. The theme is correctly accessed with optional chaining throughout the template (e.g.,theme?.base,theme?.btn).src/routes/docs/pages/theme-provider.md (3)
15-17: Good addition of reactivity explanation.Clear and concise explanation of how ThemeProvider reactivity works with Svelte's context API. This helps users understand the automatic re-rendering behavior.
177-181: LGTM! Reactive theme example inclusion.Good addition of a live reactive theme example to demonstrate the feature.
190-221: Clear dynamic theme switching documentation.The example effectively demonstrates using
$stateand$derivedfor reactive theme switching. This pattern is consistent with the component implementations across the PR.src/routes/docs-examples/pages/theme-provider/ThemeReactive.svelte (2)
1-32: Well-structured reactive theming demonstration.The example clearly demonstrates reactive theming with:
$statefor user-controlled values$derivedfor the themes map (reacting tobuttonWidth)$derivedfor selecting the current themeThis is an excellent reference implementation for users.
83-101: LGTM! Clean ThemeProvider integration.The ThemeProvider is correctly bound to the reactive
currentTheme, and the themed components (Button, Card) will automatically update when the theme changes.src/lib/pagination/PaginationItem.svelte (1)
10-23: No action needed — code is correct.The theme structure for
paginationItemuses a string-based theme from thetv()function, not an object with properties. Passingthemedirectly toclsx(theme, className)on line 21 is the correct pattern. The$derived()wrapper properly enables reactive theme updates when using ThemeProvider.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/routes/docs-examples/pages/theme-provider/ThemeReactive.svelte (1)
69-74: Consider extracting repeated button styling for readability.The width selector buttons have repetitive class logic. For a demo file this is acceptable, but extracting the button styling could improve readability.
+ const widthOptions = ["w-32", "w-48", "w-64"] as const; + const widthLabels: Record<string, string> = { + "w-32": "Small (w-32)", + "w-48": "Medium (w-48)", + "w-64": "Large (w-64)" + };Then in the template:
{#each widthOptions as width} <button class="rounded px-4 py-2 {buttonWidth === width ? 'bg-gray-700 text-white' : 'bg-gray-200 hover:bg-gray-300'}" onclick={() => (buttonWidth = width)} > {widthLabels[width]} </button> {/each}
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/lib/split-pane/Divider.svelte(2 hunks)src/routes/docs-examples/pages/theme-provider/ThemeReactive.svelte(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/lib/split-pane/Divider.svelte
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{svelte,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{svelte,ts,tsx,js,jsx}: Use the Flowbite-Svelte MCP server to discover components by name or category before implementing UI components
Always use findComponent tool FIRST to locate the correct Flowbite-Svelte component before fetching documentation
After calling findComponent, use getComponentDoc tool to fetch complete documentation including usage examples, props, and best practices for Flowbite-Svelte components
Files:
src/routes/docs-examples/pages/theme-provider/ThemeReactive.svelte
🧠 Learnings (5)
📓 Common learnings
Learnt from: shinokada
Repo: themesberg/flowbite-svelte PR: 1882
File: src/lib/bottom-navigation/BottomNavHeaderItem.svelte:9-9
Timestamp: 2025-12-16T13:21:19.575Z
Learning: In flowbite-svelte, when using ThemeProvider with reactive themes, `getTheme("componentName")` calls must be placed inside `$derived()` expressions (not at module scope) to ensure components react to dynamic theme changes. This pattern is intentional for reactive theming support.
📚 Learning: 2025-12-16T13:21:19.575Z
Learnt from: shinokada
Repo: themesberg/flowbite-svelte PR: 1882
File: src/lib/bottom-navigation/BottomNavHeaderItem.svelte:9-9
Timestamp: 2025-12-16T13:21:19.575Z
Learning: When using ThemeProvider with reactive themes in Flowbite-Svelte, ensure that getTheme("componentName") calls are placed inside a $derived() expression (not at module scope) so components react to dynamic theme changes. This applies broadly to Svelte components in this repo that rely on theme-derived values. For example:
// bad: at module scope
const theme = getTheme("button");
// good: inside a derived store
import { derived } from 'svelte/store';
const themeDerived = derived(themeProviderStore, ($themeProvider) => getTheme("button"));
// use $themeDerived in template/component
Applied to files:
src/routes/docs-examples/pages/theme-provider/ThemeReactive.svelte
📚 Learning: 2025-11-25T07:26:46.504Z
Learnt from: CR
Repo: themesberg/flowbite-svelte PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T07:26:46.504Z
Learning: Applies to **/*.{svelte,ts,tsx,js,jsx} : Use the Flowbite-Svelte MCP server to discover components by name or category before implementing UI components
Applied to files:
src/routes/docs-examples/pages/theme-provider/ThemeReactive.svelte
📚 Learning: 2025-11-25T07:26:46.504Z
Learnt from: CR
Repo: themesberg/flowbite-svelte PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T07:26:46.504Z
Learning: Applies to **/*.{svelte,ts,tsx,js,jsx} : After calling findComponent, use getComponentDoc tool to fetch complete documentation including usage examples, props, and best practices for Flowbite-Svelte components
Applied to files:
src/routes/docs-examples/pages/theme-provider/ThemeReactive.svelte
📚 Learning: 2025-03-20T11:52:09.106Z
Learnt from: superstes
Repo: themesberg/flowbite-svelte PR: 0
File: :0-0
Timestamp: 2025-03-20T11:52:09.106Z
Learning: In the Flowbite Svelte library's form components like MultiInput, when handling focus states for validation, avoid hardcoding focus-within classes like 'focus-within:border-primary-500'. Instead, create a dynamic mapping object (e.g., focusWithinClasses) that changes the focus ring color based on the current color state, especially when inputInvalid=true.
Applied to files:
src/routes/docs-examples/pages/theme-provider/ThemeReactive.svelte
🔇 Additional comments (2)
src/routes/docs-examples/pages/theme-provider/ThemeReactive.svelte (2)
1-38: Reactive theming pattern implemented correctly.The use of
$stateforselectedColorandbuttonWidth, combined with$derivedfor boththemesandcurrentTheme, correctly implements the reactive theming pattern. This ensures components re-render when either the color or width changes. ThecolorClasseslookup also properly addresses the dynamic Tailwind class compilation issue from the previous review.Based on learnings, placing
$derived()expressions for theme values ensures components react to dynamic theme changes.
89-107: ThemeProvider integration looks good.The
currentThemederived value is correctly passed toThemeProvider, and theButtonandCardcomponents will reactively update their styles whenselectedColororbuttonWidthchanges. This demonstrates the intended reactive theming behavior.
1 participant
🔗 Related issue (optional)
Closes #
📑 Description
🔍 PR Type
🚦 PR Status
✅ Checklist
pnpm lint && pnpm check && pnpm test:e2eand all tests passmainbranch (not the published npm version)🧪 Screenshots / Demos (optional)
ℹ️ Additional Information
Summary by CodeRabbit
New Features
Refactor
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.