fabrik_theme #

A lightweight, opinionated theming foundation for Flutter — semantic colors, typography, and design tokens with zero layout or UI concerns.

What's included #

Installation #

dependencies:
  fabrik_theme: ^1.0.2

flutter pub get

Quick Start #

1. Define your colors #

class AppThemeColors {
  static const light = AppColors(
    primary: Color(0xFF6C5CE7),
    onPrimary: Color(0xFFFFFFFF),
    accent: Color(0xFF00CEC9),
    onAccent: Color(0xFFFFFFFF),
    surface: Color(0xFFFFFFFF),
    onSurface: Color(0xFF111111),
    textPrimary: Color(0xFF111111),
    textSecondary: Color(0xFF444444),
    textTertiary: Color(0xFF777777),
  );

  static const dark = AppColors(
    primary: Color(0xFFB4A7FF),
    onPrimary: Color(0xFF1A1A2E),
    accent: Color(0xFF55EFC4),
    onAccent: Color(0xFF003D33),
    surface: Color(0xFF121212),
    onSurface: Color(0xFFFFFFFF),
    textPrimary: Color(0xFFFFFFFF),
    textSecondary: Color(0xFFCCCCCC),
    textTertiary: Color(0xFF999999),
  );
}

2. Create the theme #

MaterialApp(
  theme: FabrikTheme.create(
    brightness: Brightness.light,
    colors: AppThemeColors.light,
    fontFamily: 'Inter',
  ),
  darkTheme: FabrikTheme.create(
    brightness: Brightness.dark,
    colors: AppThemeColors.dark,
    fontFamily: 'Inter',
  ),
);

Typography is generated automatically from the colors unless you pass a custom AppTypography.

3. Consume in widgets #

// Colors
Container(color: context.colors.surface)

// Typography
Text('Welcome', style: context.typography.headlineMedium)
Text('Subtitle', style: context.typography.bodyMediumSecondary)
Text('Action', style: context.typography.labelLarge)

Design Tokens #

Tokens are static and never require BuildContext:

Padding(padding: EdgeInsets.all(SpacingTokens.lg))         // 16
BorderRadius.circular(RadiusTokens.md)                     // 12
Border.all(width: BorderTokens.thin)                       // 1
PhysicalModel(elevation: ElevationTokens.sm)               // 3

Typography Variants #

Each scale has semantic variants:

context.typography.bodyMedium           // primary color
context.typography.bodyMediumSecondary  // secondary color
context.typography.bodyMediumTertiary   // tertiary color
context.typography.titleLargePrimary    // brand accent color
context.typography.bodyLargeEmphasis    // bold primary

Documentation #

Full API reference and guides at fabriktool.com

Contributing #

Found a bug or have a suggestion? Open an issue or pull request on GitHub.

Maintainers #

• Ashish Bhakhand