# ThemeSwitcher
> AstrolThemeSwitcher: theme color and light, dark or automatic mode selector for Blazor.
Source page: https://doc.astrolui.com/basic-component/theme-switcher
Theme color and light/dark mode, to place wherever you want (for example in the top bar).
## 1. Demo AstrolThemeSwitcher
The demo changes only affect the demo. The same component controls the docs in the top right corner.
```razor
@using Astrol.Component.Basic.Layout
```
## 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](/theme).
```razor
@* Any color: the theme becomes AstrolTheme.Custom with CustomColor *@
@* Only some colors and without tooltips *@
@* The layout (and ) applies the custom color *@
...
```
## 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.
```razor
@* user menu, notifications... *@
@Body
```
```csharp
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?)**, 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.
