# ThemeSwitcher
**Also known as:** DesignSystem, DarkMode, Theming
## Description
BitThemeSwitcher is the chrome for the two choices a themed app usually puts in its header: which design system it is dressed in (Fluent, Fluent 2, Material, Cupertino) and whether that design system is showing its light or its dark scheme. Both halves resolve to one bit-theme name applied through BitThemeManager, so switching the design system keeps the current scheme and toggling the scheme keeps the current design system.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Classes | `BitThemeSwitcherClassStyles?` | null | Custom CSS classes for different parts of the switcher. |
| DarkSchemeIconName | `string` | ClearNight | The icon of the button that switches to the dark scheme - the one shown while the light scheme is active. A Fluent UI (Fabric MDL2) icon name, rendered through the Bit.BlazorUI.Icons stylesheet. |
| DarkSchemeTitle | `string?` | Turn off light | The title and aria-label of the button that switches to the dark scheme. |
| DesignSystems | `IEnumerable<BitThemeSwitcherItem>?` | null | The design systems offered by the picker. Defaults to the four that ship with the library (DefaultDesignSystems). The first item is also the fallback the picker shows for an applied theme that no item claims. |
| DesignSystemTitle | `string?` | Design system | The title and aria-label of the design system picker. |
| InitialTheme | `string?` | null | The theme to reflect until the applied one can be read back, which takes JS interop and therefore a first interactive render. Hand it the theme the app persisted (the bit-theme-preference cookie, which the client mirrors the choice into when the host page opts in with the bit-theme-persist-cookie attribute) so prerendered markup shows the visitor's own design system instead of showing the first item until hydration. |
| LightSchemeIconName | `string` | Sunny | The icon of the button that switches to the light scheme - the one shown while the dark scheme is active. A Fluent UI (Fabric MDL2) icon name, rendered through the Bit.BlazorUI.Icons stylesheet. |
| LightSchemeTitle | `string?` | Turn on light | The title and aria-label of the button that switches to the light scheme. |
| NoColorScheme | `bool` | false | Hides the light/dark toggle, leaving only the design system picker. |
| NoDesignSystem | `bool` | false | Hides the design system picker, leaving only the light/dark toggle. |
| OnChange | `EventCallback<string>` | | The callback that is called when the theme changes, receiving the applied theme name. |
| Styles | `BitThemeSwitcherClassStyles?` | null | Custom CSS styles for different parts of the switcher. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitThemeSwitcherItem Properties
A design system offered by the BitThemeSwitcher: a name to show, and the two theme names its light and dark schemes are spelled with.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AriaLabel | `string?` | null | The aria-label of this item in the picker. Falls back to Text. |
| DarkTheme | `string?` | null | The theme name applied for this design system's dark scheme. Defaults to "{Value}-dark". |
| IsEnabled | `bool` | true | Whether this design system can be selected. |
| LightTheme | `string?` | null | The theme name applied for this design system's light scheme. Defaults to "{Value}-light". |
| Text | `string?` | null | The text shown for this design system in the picker. Falls back to Value. |
| Value | `string` | string.Empty | The design system this item selects - the stem its two theme names share, e.g. "material" for the material-light / material-dark pair. It is also what identifies the item, so it has to be unique within one switcher, and it is matched against the applied theme name to decide which item is the selected one. |
### BitThemeSwitcherClassStyles Properties
Custom CSS classes/styles for different parts of the BitThemeSwitcher.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitThemeSwitcher. |
| DesignSystem | `string?` | null | Custom CSS classes/styles for the design system picker of the BitThemeSwitcher. |
| ColorSchemeButton | `string?` | null | Custom CSS classes/styles for both color scheme buttons of the BitThemeSwitcher. |
| DarkSchemeButton | `string?` | null | Custom CSS classes/styles for the color scheme button that is shown while the dark scheme is active (the one that switches to light) of the BitThemeSwitcher. |
| LightSchemeButton | `string?` | null | Custom CSS classes/styles for the color scheme button that is shown while the light scheme is active (the one that switches to dark) of the BitThemeSwitcher. |
| Icon | `string?` | null | Custom CSS classes/styles for the icon of each color scheme button of the BitThemeSwitcher. |
## Examples
\n**Basic**:
```razor
customDesignSystems =
[
new() { Text = "Fluent", Value = "fluent", LightTheme = BitThemePresets.Light, DarkTheme = BitThemePresets.Dark },
new() { Text = "Cupertino", Value = BitExtraThemePresets.Cupertino },
];
}
```
\n**Parts**:
```razor
Applied theme: @changedTheme
@code {
private string? changedTheme;
}
```
\n**Style & Class**:
```razor