Control the site’s default/alternate theme by adding or removing the is-alternate-mode class from the page-wrapper element.
Theme triggers are managed through the b-theme attribute. A checkbox using b-theme = toggle adds is-alternate-mode when checked and removes it when unchecked. Radio buttons use b-theme = default to remove the class and b-theme = alternate to add it.
The selected mode is saved in a cookie, so the visitor’s choice is remembered across pages and future visits. When the page loads, the code checks the saved cookie, applies the correct theme, and syncs all matching checkbox or radio triggers to the active state.
Synchronize each toggle’s visual state with its checkbox or radio input. Each element with the toggle-input class is connected to its closest b-toggle = group wrapper. When the input is checked, is-checked is added to the wrapper and to any nested elements marked with b-toggle = state. When the input is unchecked, is-checked is removed from the wrapper and from all nested b-toggle = state elements. Use b-toggle = state only on elements that need to visually change, such as text, tracks, thumbs, icons, cards, or labels. This behavior supports checkbox toggles and radio button groups. The correct state is synchronized on page load without triggering unwanted animations. View the full documentation for setup, structure, and usage details.