FluttyUI Logo
FluttyUI
Customization

Dark Mode

Implement dark mode in FluttyUI with readable contrast, semantic tokens, and consistent component behavior.

Dark mode should be treated as a first-class theme, not a color inversion.

Dark mode checklist

  • Validate contrast for body text, labels, and disabled states
  • Keep elevation and border tokens adjusted for darker surfaces
  • Test interactive states (hover, focus, pressed) in both modes

With FluttyUI tokens, light and dark themes can share structure while using mode-specific values.

Create Theme

Build a custom FluttyUI theme with your brand tokens and export it for use across Flutter apps.

Override Styles

Override FluttyUI component styles safely using tokens and scoped customizations instead of brittle one-offs.

On this page

Dark mode checklist