Theme Switch Reference
Reference for Theme Switch Reference in Web Framework References. Key properties: ID, Icons, Manager, Menu Text.
Add a Bootstrap Theme switcher to your website or app. Bootstrap now embraces color modes, introducing the much-awaited dark mode. With version 5.3 and newer you have the flexibility to integrate a custom color mode switcher. Bootstrap 5 component. Add the component and configure its properties in the Inspector.
Inspector Property Groups
Theme Switch Properties
| Property | Type | Details |
|---|---|---|
| ID | text | Theme switch element ID. Sets a unique identifier for the theme switch control. Use this for wiring, styling, and targeting the control from other UI elements. Keep it unique per page. Bootstrap docs: Color modes Required in common setups. Attribute: id |
| Icons | droplist | Show icons for theme options. Displays icons next to the Light/Dark/Auto options (when supported by the component variant). Icons make the UI quicker to scan, especially in compact menus. Bootstrap docs: Color modes Attribute: icons Options: Bootstrap Icons, Font Awesome |
| Manager | droplist | Enables theme persistence/manager. Enables persistence for the selected theme (Light/Dark/Auto). When enabled, the manager stores the user choice and restores it on next load, typically by applying Bootstrap 5.3 color modes via data-bs-theme . Bootstrap docs: Color modes Attribute: manager |
| Menu Text | text | Enter text that appears next to the icon Sets the text label shown in the theme switch menu. Use clear, short labels so users understand they are changing the page theme (for example: “Theme” or “Appearance”). Bootstrap docs: Introduction Attribute: menu-text |
| Dark Text | text | Change the default Dark text Customizes the label for the Dark option. This is useful for localization or matching your app vocabulary (for example: “Night”). Bootstrap docs: Color modes Required in common setups. Attribute: text-dark |
| Light Text | text | Change the default Light text Customizes the label for the Light option. This is useful for localization or matching your app vocabulary. Bootstrap docs: Color modes Required in common setups. Attribute: text-light |
Display
| Property | Type | Details |
|---|---|---|
| Hide on | button_group | Options: xs, sm, md, lg, xl, xxl |
| button_group | ||
| Visually Hidden | boolean | |
| Focusable | boolean |
Flex Item
| Property | Type | Details |
|---|---|---|
| Align Self | button_group | Options: , , , , |
| Order | range | |
| Grow | button_group | Options: flex-grow-1, flex-grow-0 |
| Shrink | button_group | Options: flex-shrink-1, flex-shrink-0 |