Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Theme
A complete, opt-in theme system with dark mode, base color palettes, primary accent colors, border radius customization, and localStorage persistence. Includes a full theme switcher popover and a standalone dark mode toggle.
Theme Switcher
The
BbThemeSwitcher renders a popover panel with independent base color and primary color sections (each with its own selection indicator), border radius presets, and a light/dark mode toggle. Picking a base color no longer resets the primary color, and a "Default" chip in the primary section restores the base palette's own accent. Set ColorLayout to ThemeSwitcherColorLayout.Combined for the legacy single-grid layout. Both components auto-initialize the ThemeService on first render — no manual setup needed.<BbThemeSwitcher />
@* Legacy single-grid color layout *@
<BbThemeSwitcher ColorLayout="ThemeSwitcherColorLayout.Combined" />
@* With custom alignment *@
<BbThemeSwitcher Align="PopoverAlign.End" />Dark Mode Toggle
A standalone button that toggles dark mode. Shows a sun icon in light mode and a moon icon in dark mode. Customize the button variant, size, and icons.
<BbDarkModeToggle />
@* With label *@
<BbDarkModeToggle Variant="ButtonVariant.Ghost" Size="ButtonSize.Default" ShowLabel="true" />
@* With custom icons *@
<BbDarkModeToggle>
<LightIcon><LucideIcon Name="sun" /></LightIcon>
<DarkIcon><LucideIcon Name="moon" /></DarkIcon>
</BbDarkModeToggle>