Theme Switcher

MokaThemeSwitcher renders a dropdown button that lets users pick from a list of named themes. Optionally shows a color preview swatch next to each theme name.

Parameters

Name Type Default Description
Themes IReadOnlyList<MokaThemeOption> [] Available themes
SelectedTheme string? -- Currently selected theme name (two-way bindable)
SelectedThemeChanged EventCallback<string?> -- Callback when selection changes
ShowPreview bool true Show color preview swatches next to theme names
Size MokaSize Md Button size
Class string? -- Additional CSS classes
Style string? -- Additional inline styles

MokaThemeOption

Property Type Description
Name string Display name
Value string Unique value key
PrimaryColor string? Primary color hex for the preview swatch

Basic with Themes

<MokaThemeSwitcher Themes="@_themes" SelectedTheme="light" />

@code {
    private IReadOnlyList<MokaThemeOption> _themes = new[]
    {
        new MokaThemeOption { Name = "Light", Value = "light", PrimaryColor = "#ffffff" },
        new MokaThemeOption { Name = "Dark", Value = "dark", PrimaryColor = "#060608" },
        new MokaThemeOption { Name = "Ocean", Value = "ocean", PrimaryColor = "#0277bd" }
    };
}
[CS0246] /Preview.razor(4,27): The type or namespace name 'MokaThemeOption' could not be found (are you missing a using directive or an assembly reference?) [CS0246] /Preview.razor(6,13): The type or namespace name 'MokaThemeOption' could not be found (are you missing a using directive or an assembly reference?) [CS0246] /Preview.razor(7,13): The type or namespace name 'MokaThemeOption' could not be found (are you missing a using directive or an assembly reference?) [CS0246] /Preview.razor(8,13): The type or namespace name 'MokaThemeOption' could not be found (are you missing a using directive or an assembly reference?) [CS1503] /Preview.razor(1,29): Argument 1: cannot convert from 'System.Collections.Generic.IReadOnlyList<MokaThemeOption>' to 'System.Collections.Generic.IReadOnlyList<Moka.Red.Primitives.ThemeSwitcher.MokaThemeSwitcherItem>' [CS0103] /Preview.razor(1,53): The name 'light' does not exist in the current context

Without Preview

<MokaThemeSwitcher Themes="@_themes" SelectedTheme="dark" ShowPreview="false" />

@code {
    private IReadOnlyList<MokaThemeOption> _themes = new[]
    {
        new MokaThemeOption { Name = "Light", Value = "light" },
        new MokaThemeOption { Name = "Dark", Value = "dark" },
        new MokaThemeOption { Name = "Ocean", Value = "ocean" }
    };
}
[CS0246] /Preview.razor(4,27): The type or namespace name 'MokaThemeOption' could not be found (are you missing a using directive or an assembly reference?) [CS0246] /Preview.razor(6,13): The type or namespace name 'MokaThemeOption' could not be found (are you missing a using directive or an assembly reference?) [CS0246] /Preview.razor(7,13): The type or namespace name 'MokaThemeOption' could not be found (are you missing a using directive or an assembly reference?) [CS0246] /Preview.razor(8,13): The type or namespace name 'MokaThemeOption' could not be found (are you missing a using directive or an assembly reference?) [CS1503] /Preview.razor(1,29): Argument 1: cannot convert from 'System.Collections.Generic.IReadOnlyList<MokaThemeOption>' to 'System.Collections.Generic.IReadOnlyList<Moka.Red.Primitives.ThemeSwitcher.MokaThemeSwitcherItem>' [CS0103] /Preview.razor(1,53): The name 'dark' does not exist in the current context
Last updated: 2026-04-11
Was this page helpful?