Getting StartedTheming & Tokens

Theming & Tokens

Bloom UI provides an opinionated, multi-theme architecture powered by Flutter's official ThemeExtension API. Access colors, typography, radius, and motion directly on any BuildContext.

8 Style Presets

Bloom UI includes 8 curated visual styles corresponding to the modern shadcn style scale:

Nova

Neutral, crisp, high contrast (Default)

Vega

Warm amber tones, golden accents

Maia

Emerald forest, clean enterprise tech

Lyra

Tech violet, cyber aesthetics

Mira

Deep royal blue, oceanic contrast

Luma

Vibrant neon pink, modern consumer

Sera

Teal & cyan, fintech precision

Rhea

Sunset orange, dynamic energy

5-Petal Color Palette

Bloom's brand identity is built on a harmonious 5-color petal spectrum:

Petal Purple

#8B5CF6

Petal Blue

#3B82F6

Petal Pink

#FF4B8B

Petal Cyan

#06B6D4

Petal Orange

#F59E0B

BuildContext Extensions

Instead of verbose lookups, Bloom provides concise extensions:

BuildContext Tokens Extension

dart

// Access colors directly on BuildContext
final colors = context.bloomColors;
colors.primary;        // Active brand color
colors.surface0;       // Canvas background
colors.surface1;       // Card / Popover background
colors.border;         // Border stroke
colors.destructive;    // Soft destructive tint

// Access typography
final typography = context.bloomTypography;
typography.sans;       // Inter / system sans font family
typography.mono;       // JetBrains Mono font family

// Access radius scale
final radius = context.bloomRadius;
radius.sm;  // 4.0
radius.md;  // 6.0
radius.lg;  // 8.0
radius.xl;  // 12.0

// Access motion durations
BloomMotion.fast;      // 150ms spring
BloomMotion.normal;    // 250ms easeOutCubic

Creating Custom Themes

Define a custom BloomColorScheme:

Custom BloomTheme Setup