RhombusKit

Theme Controls

Two UI primitives drive the same RhombusThemeService from @rhombuskit/theme-engine: <rhombus-theme-toggle> is a three-state icon button that cycles light → dark → system, and <rhombus-theme-menu> opens a dropdown with explicit Light / Dark / System items. Both stay in sync with each other and the shell header.

Example

When to use

  • Reach for the toggle in compact contexts (a tight icon row) where a single tappable target beats a dropdown, at the cost of up to three taps to reach a given theme.
  • Reach for the menu in headers and toolbars with room for a dropdown — every preference is one click away and the active one is marked.

When not to use

  • For a single on/off setting that isn't theme preference, use a Switch instead of a cycling icon button.
  • For a flat list of unrelated actions off a trigger, reach for a Menu — the theme menu is purpose-built for the three theme options only.
  • To document or expose the colour tokens these controls switch between, see Theming rather than building bespoke toggles.

Related components

  • Theming — the token contract these controls switch.
  • Menu — the dropdown primitive the theme menu specialises.
  • Switch — binary on/off settings.
  • App Shell — the header these controls usually live in.

Was this page helpful?