DEV Community

Satyam Gawali
Satyam Gawali

Posted on

Introducing Chroma Theme šŸŽØ — A Premium Material 3 Dynamic Theming Engine for Flutter

Introducing Chroma Theme šŸŽØ

A Premium Material 3 Dynamic Theming Engine for Flutter

Managing themes in Flutter can become complex very quickly, especially when working with Material 3.

You often need to:

  • Configure dozens of colors
  • Support Light and Dark themes
  • Add AMOLED and High Contrast modes
  • Manage custom palettes
  • Persist user preferences
  • Write repetitive ThemeData boilerplate

To solve this, I built Chroma Theme.

Chroma Theme is a premium, dynamic, and adaptive Material 3 theming engine for Flutter that turns a single seed color into a complete, production-ready theme system.


✨ Features

  • šŸŽØ Dynamic seed-based color generation
  • šŸŒ— Light, Dark, AMOLED, and High Contrast modes
  • šŸŽ­ 20+ professionally curated palettes
  • šŸ› ļø Full Material 3 tonal palette access
  • 🧩 Global component overrides
  • šŸ’¾ Theme persistence support
  • šŸš€ Intuitive BuildContext extensions
  • ♿ Accessibility-focused design

šŸ“¦ Installation

dependencies:
  chroma_theme: ^1.1.0
Enter fullscreen mode Exit fullscreen mode

šŸš€ Quick Start

import 'package:chroma_theme/chroma_theme.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    ChromaTheme(
      initialMode: ChromaThemeMode.system,
      initialPalette: ChromaPalette.blue,
      child: const MyApp(),
    ),
  );
}
Enter fullscreen mode Exit fullscreen mode

šŸŽØ Dynamic Seeds

context.chroma.setSeeds(
  const ChromaSeeds(
    primary: Color(0xFF6366F1),
  ),
);
Enter fullscreen mode Exit fullscreen mode

šŸŒ“ Theme Modes

Supported modes:

  • Light
  • Dark
  • AMOLED
  • High Contrast
  • System

šŸŽ­ Premium Palettes

Chroma Theme includes 20+ curated palettes such as:

  • Neon Forest
  • Midnight Mint
  • Berry Blush
  • Ice Latte
  • Noir Mauve
  • Ocean Signal

🧩 Component Overrides

ChromaTheme(
  overrides: ChromaOverrides(
    appBarTheme: const AppBarTheme(
      centerTitle: true,
    ),
  ),
  child: const MyApp(),
);
Enter fullscreen mode Exit fullscreen mode

šŸ’¾ Persistence Support

Save and restore user theme preferences using SharedPreferences, Hive, or any custom storage solution.


šŸ”— Links


šŸ™Œ Feedback Welcome

I’d love to hear your thoughts, suggestions, and contributions.

If you find the package useful, please consider starring the GitHub repository and sharing your feedback.

Thanks for reading! šŸš€

Top comments (0)