1. Demo AstrolThemeSwitcher

The demo changes only affect the demo. The same component controls the docs in the top right corner.

@using Astrol.Component.Basic.Layout

<AstrolThemeSwitcher @bind-Theme="theme" @bind-Mode="mode" />

<AstrolThemeSwitcher ShowMode="false" @bind-Theme="theme" />

<AstrolThemeSwitcher ShowColors="false" AllowAuto="false" @bind-Mode="mode" />

2. Custom color and tooltips

With AllowCustomColor one more circle with a color picker appears: the user picks any color and the theme becomes AstrolTheme.Custom with CustomColor (both support @bind). Colors limits which predefined colors are offered. Color names and the mode button action are shown with AstrolTooltip; with ShowTooltips="false" no help is shown (the aria-label is kept for screen readers).

In the demo the theme only applies to its container: pick a color and watch the button and the toggle change. For the whole app, see Theme.

@* Any color: the theme becomes AstrolTheme.Custom with CustomColor *@

<AstrolThemeSwitcher @bind-Theme="theme" @bind-CustomColor="customColor" AllowCustomColor="true" />

@* Only some colors and without tooltips *@

<AstrolThemeSwitcher @bind-Theme="theme" ShowTooltips="false"

 Colors="new[] { AstrolTheme.Yellow, AstrolTheme.Blue }" />

@* The layout (and <html>) applies the custom color *@

<AstrolLayoutMenu Style="@theme" CustomColor="@customColor" Mode="@mode"> ... </AstrolLayoutMenu>

3. In the layout top bar

Put it in the Top of AstrolLayoutMenu (next to the user, notifications...) and turn off the side menu mode button with ShowSetMode="false". The layout repaints with the new color without reloading; saving the preference is up to your app.

<AstrolLayoutMenu Style="@theme" Mode="@mode" ShowSetMode="false" OnChangeThemeMode="SaveMode">

 <Top>

 <a class="my-logo" href="/"><img src="img/logo.svg" alt="MyApp" /></a>

 <div class="my-top-actions">

 <AstrolThemeSwitcher Theme="@theme" ThemeChanged="SaveTheme" Mode="@mode" ModeChanged="SaveMode" />

 @* user menu, notifications... *@

 </div>

 </Top>

 <Menu> <AstrolMenuAdmin MenuList="menu" /> </Menu>

 <Body> @Body </Body>

</AstrolLayoutMenu>

private async Task SaveTheme(AstrolTheme value)

{

 theme = value; // the layout repaints with the new color, no reload needed

 await js.InvokeVoidAsync("localStorage.setItem", "theme", value.ToString());

}

Supported parameters

• Theme (AstrolTheme) and ThemeChanged, theme color (supports @bind-Theme).
• Mode (AstrolThemeMode) and ModeChanged, Light, Dark or Auto mode (supports @bind-Mode).
• AllowAuto (bool), the mode button includes automatic, which follows the system (default true).
• ShowColors, ShowMode (bool), show the colors and the mode button (default true).
• ShowTooltips (bool), color names and mode action in an AstrolTooltip; with false, no visible help (default true).
• Colors (IEnumerable<AstrolTheme>?), predefined colors offered (default all).
• AllowCustomColor (bool), adds the custom color picker (default false).
• CustomColor (string?) and CustomColorChanged, custom color in hexadecimal (supports @bind-CustomColor).
• Class (string?), additional css class.