Theme Manager Reference
Reference for Theme Manager Reference in Web Framework References. Key properties: ID, Key, Theme.
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 Manager Properties
| Property | Type | Details |
|---|---|---|
| ID | text | ID for the theme switch component. Sets the component id attribute. Use a stable id if you reference this component from other scripts or need a consistent selector. Bootstrap docs: Color modes Required in common setups. Attribute: id |
| Key | text | Storage key used to persist the theme. Sets the key used to store the chosen theme (typically in localStorage). Use a unique key per project/app to avoid collisions. Bootstrap docs: Color modes Attribute: key |
| Theme | droplist | Theme to apply. Selects which theme (color mode) to apply. Bootstrap 5.3 supports light/dark via the data-bs-theme attribute. Bootstrap docs: Color modes Attribute: theme Options: Auto, Light, Dark |
Actions
Set Theme
Bootstrap 5 Set Theme
| Configuration group | Controls |
|---|---|
| Set Theme Properties | Theme |
Dynamic Attributes
Key
| Attribute property | Type | Details |
|---|---|---|
| Value: | text | Choose dynamic data binding. |
Theme
| Attribute property | Type | Details |
|---|---|---|
| Value: | text | Choose dynamic data binding. |