Component

BOBThemeSelector

Toggle between light, dark, and any custom theme you register. Persists the choice to localStorage and flips the data-theme attribute on html.

API reference ↗

Default variant

A labeled button with an icon that reflects the current theme.

RAZOR
<BOBThemeSelector />

Sun / Moon variant

The compact switch used in the docs header: a BOBSwitch with sun and moon icons.

RAZOR
<BOBThemeSelector Variant="BOBThemeSelectorVariant.SunMoon" />

Custom themes list

Cycle through a custom list — not limited to light / dark.

RAZOR
<BOBThemeSelector AvailableThemes="@(new[] { "light", "dark" })" />

Hook onto change events

Last change: (unchanged)
RAZOR
<BOBThemeSelector Variant="BOBThemeSelectorVariant.SunMoon"
                  OnThemeChanged="@(t => { _lastTheme = t; StateHasChanged(); })" />
<span>Last change: <code>@_lastTheme</code></span>

Properties

4 rows.
PropertyTypeDefaultDescription
AvailableThemesstring[]new[] { "light", "dark" }AvailableThemes.
OnThemeChangedEventCallback<string>Raised when the ThemeChanged event occurs.
ShowIconbooltrueMaterial icon name for the Show.
ThemeIconsDictionary<string, string>?Override map of theme name → Material icon. Falls back to a built-in default when .