Blazor Theme Switcher
Documentation and examples for using the Blazor Bootstrap Theme Switcher component.
How it works #
In the following example, you will see a theme switcher similar to a dropdown component with three options: Light, Dark, and Auto.
<ThemeSwitcher />Position #
By default, the Position is set to
DropdownMenuPosition.Start.
You can change the position of the theme switcher by setting the Position parameter to DropdownMenuPosition.End.
<ThemeSwitcher Position="DropdownMenuPosition.End" />
Align the theme switcher to the right to position the dropdown menu on the right side of the button.
<div class="float-end">
<ThemeSwitcher Position="DropdownMenuPosition.End" />
</div>Events #
If you want to perform an action when the theme changes, you can use the
OnThemeChanged event.
<ThemeSwitcher OnThemeChanged="OnThemeChanged" />
@code
{
[Inject]
ToastService ToastService { get; set; } = default!;
private void OnThemeChanged(string themeName)
{
// do something when the theme changes
ToastService.Notify(new(ToastType.Success, $"Theme changed to {themeName}"));
}
}