Theming

ThemeSwitcher

Bit.BlazorUI.Extras

DesignSystem

DarkMode

Theming

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.

ForceAnimation (whole page)

Notes

To use this component, you need to install the
Bit.BlazorUI.Extras
nuget package, as described in the Optional steps of the Getting started page.

The Fluent 2, Material and Cupertino design systems are override-only stylesheet bundles that ship in that same package, so offering them only does something on a page that links the bundle after the core stylesheet (see the Presets section of the Theming page). This website links all three, which is why the switchers below actually re-skin it.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

The default switcher: the four packaged design systems, and the light/dark toggle. It acts on the document, so a pick here re-skins this whole website live - exactly like the one in the site header, which is this very component.

Design systems

DesignSystems replaces the offered list. Value is the stem the two scheme names share, so an item needs LightTheme and DarkTheme spelled out only when its themes are not named "{Value}-light" and "{Value}-dark" - as with Fluent, whose pair the core stylesheet calls "light" and "dark". The first item is also the fallback the picker shows for an applied theme that no item claims.

Parts

NoColorScheme and NoDesignSystem drop either half, for chrome that has room for only one of them or that puts them in different places:

Icons & titles

Each control names what it does through its own title (which is also its accessible label), and the two toggle glyphs are Fluent UI icon names. Every one of them is a parameter:

Events

OnChange reports the theme that was applied, whichever half of the control applied it. That is the hook for whatever else has to follow the theme but is not painted by the page - the site header uses it to repaint the native status bar on MAUI.

Applied theme:

Style & Class

Use Style, Class, Styles and Classes to customize the switcher:

RTL

Use Dir="BitDir.Rtl" to change the direction of the switcher:

API

Every parameter, public member, sub-class and enum this component exposes.

BitThemeSwitcher 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.

BitComponentBase parameters

Name	Type	Default value	Description
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.

BitComponentBase 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.

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.

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.