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)