1. Demo AstrolThemeSwitcher

Los cambios de la demo solo afectan a la demo. Arriba a la derecha está el mismo componente controlando el documentador.

@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. Color propio y tooltips

Con AllowCustomColor aparece un círculo más con un selector de color: el usuario elige cualquier color y el tema pasa a AstrolTheme.Custom con CustomColor (ambos admiten @bind). Con Colors se limita qué colores predefinidos se ofrecen. Los nombres de los colores y la acción del botón de modo se muestran con AstrolTooltip; con ShowTooltips="false" no se muestra ninguna ayuda (se conserva el aria-label para los lectores de pantalla).

En la demostración el tema solo se aplica a su contenedor: elija un color y vea cómo cambian el botón y el interruptor. Para la aplicación entera, ver Tema.

@* 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. En la barra superior del layout

Póngalo en el Top de AstrolLayoutMenu (junto al usuario, notificaciones...) y desactive el botón de modo del menú lateral con ShowSetMode="false". El layout se repinta con el color nuevo sin recargar la página; guardar la preferencia lo hace su aplicación.

<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());

}

Parámetros que admite

• Theme (AstrolTheme) y ThemeChanged, color del tema (admite @bind-Theme).
• Mode (AstrolThemeMode) y ModeChanged, modo Light, Dark o Auto (admite @bind-Mode).
• AllowAuto (bool), el botón de modo incluye el automático, que sigue al sistema (por defecto true).
• ShowColors, ShowMode (bool), muestran los colores y el botón de modo (por defecto true).
• ShowTooltips (bool), nombres de los colores y acción del modo en un AstrolTooltip; con false, sin ayuda visible (por defecto true).
• Colors (IEnumerable<AstrolTheme>?), colores predefinidos que se ofrecen (por defecto todos).
• AllowCustomColor (bool), añade el selector de color propio (por defecto false).
• CustomColor (string?) y CustomColorChanged, color propio en hexadecimal (admite @bind-CustomColor).
• Class (string?), clase css adicional.