Bootstrap 5 component. Add the component and configure its properties in the Inspector.
| Name |
Description |
| ID | 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. Default: "". Attribute: id. |
| Icons | 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 Options: Bootstrap Icons (bi), Font Awesome (fa) Default: "bi". Attribute: icons. |
| Manager | 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 Default: "". Attribute: manager. |
| Menu 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 Default: "". Attribute: menu-text. |
| Dark 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. Default: "Dark". Attribute: text-dark. |
| Light 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. Default: "Light". Attribute: text-light. |
| Auto Text | Change the default Auto text Customizes the label for the Auto option. Auto typically follows the system preference (Light/Dark) where supported. Bootstrap docs: Color modes Required. Default: "Auto". Attribute: text-auto. |
| Name |
Description |
| Hide on | Options: Hide on mobile (xs), Hide on landscape mobile (sm), Hide on tablet (md), Hide on laptop (lg), Hide on desktop (xl), Hide on extra wide (xxl) |
| Print | Options: Show (d-print-block), Hide (d-print-none) |
| Visually Hidden | Default: false. |
| Focusable | Default: false. |
| Name |
Description |
| Align Self | Options: Start (align-self-start), Center (align-self-center), End (align-self-end), Stretch (align-self-stretch), Baseline (align-self-baseline) |
| Order | Options: First (first), 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, Last (last), D Default: "". |
| Grow | Options: Full (flex-grow-1), None (flex-grow-0) Default: "". |
| Shrink | Options: Full (flex-shrink-1), None (flex-shrink-0) Default: "". |
