Theme Toggle#

ThemeToggle is an icon button that switches between the light and dark theme. It shows a sun in light mode and a moon in dark mode, calls toggle_theme on click, and its icon follows the active theme — so it stays correct when the theme is changed elsewhere too.

Usage#

It is a plain button — a stateless action whose icon merely reflects the current theme — so there is no toggle state to keep in sync (just the sun/moon glyph) and no risk of looping.

Basic#

import bootstack as bs

with bs.App(theme="bootstrap-light") as app:
    bs.ThemeToggle()
app.run()

Variant and density#

ThemeToggle takes the button variant (default 'ghost') and density.

bs.ThemeToggle(variant="outline", density="compact")

Custom icons#

Override the icons with any Bootstrap Icons names:

bs.ThemeToggle(light_icon="brightness-high", dark_icon="moon-stars-fill")

See also#

  • Theming — themes, set_theme, and toggle_theme.

  • Button — the button ThemeToggle builds on.

API reference#

See ThemeToggle on the Widgets page.