Live component development with hot reload

@fieldflow360/org-ui

Active tab
theme-controls

ThemeControls

Unified appearance (light, dark, night) and accent controls from @fieldflow360/org-ui. Requires ThemeProvider — values sync with the header controls above.

Elevated panel (default)

ThemeControls default

<ThemeControls showHexInput />

Theme Mode

Light, dark, night, or match your OS appearance. System uses light or dark only (not night).

Accent color

Brand accent for highlights and accent buttons. Select a color to update live across the app.

Presets

Three- or six-digit HEX value.
Press Enter to apply.

Plain surface · toolbar style

Use surface="plain" when embedding in an existing card or header.

ThemeControls plain

<ThemeControls
  surface={SurfaceVariantEnum.PLAIN}
  showHexInput
/>

Theme Mode

Light, dark, night, or match your OS appearance. System uses light or dark only (not night).

Accent color

Brand accent for highlights and accent buttons. Select a color to update live across the app.

Presets

Three- or six-digit HEX value.
Press Enter to apply.

Vertical layout

ThemeControls vertical

<ThemeControls
  showHexInput
  orientation={ThemeControlsOrientationEnum.VERTICAL}
/>

Theme Mode

Light, dark, night, or match your OS appearance. System uses light or dark only (not night).

Accent color

Brand accent for highlights and accent buttons. Select a color to update live across the app.

Presets

Three- or six-digit HEX value.
Press Enter to apply.