Chromia UI provides a powerful and flexible theming system that allows you to customize the look and feel of your application. The system is built around semantic design tokens and supports light/dark modes, custom themes, and multi-brand configurations.
Core Concepts The theming system is composed of several key components:
ChromiaTheme The root widget that propagates theme data down the widget tree
ChromiaThemeData Contains all theme configuration including colors, typography, spacing, radius, and shadows
Design Tokens Low-level design primitives that form the foundation of the theme
Brand Config Brand-specific configuration for multi-brand applications
ChromiaTheme Widget The ChromiaTheme widget is an InheritedWidget that makes theme data available throughout your widget tree.
Basic Usage import 'package:chromia_ui/chromia_ui.dart' ; class MyApp extends StatelessWidget { @override Widget build ( BuildContext context) { return ChromiaTheme ( data : ChromiaThemeData . light (), child : MaterialApp ( home : MyHomePage (), ), ); } }
Constructor ChromiaTheme ({ required ChromiaThemeData data, required Widget child, Key ? key, })
The theme data to propagate down the widget tree
The widget below this widget in the tree
Static Methods Returns the ChromiaThemeData from the closest ChromiaTheme ancestor. If there is no ancestor, returns a default light theme. final theme = ChromiaTheme . of (context); final primaryColor = theme.colors.primary;
Returns the ChromiaThemeData from the closest ChromiaTheme ancestor, or null if there is no ancestor. final theme = ChromiaTheme . maybeOf (context); if (theme != null ) { // Use theme }
ChromiaThemeData The ChromiaThemeData class combines all theme systems into a single cohesive configuration.
Properties The color scheme for the theme
The typography system with predefined text styles
The spacing system for consistent padding, margins, and gaps
The border radius system for consistent corner rounding
The shadow system for creating depth and elevation
Optional brand configuration for multi-brand support
Theme brightness (light or dark)
Factory Constructors Light Theme
Dark Theme
From Brand
final theme = ChromiaThemeData . light ();
Methods Creates a copy of this theme with the given fields replaced. final customTheme = theme. copyWith ( colors : customColors, spacing : customSpacing, );
Converts this ChromiaThemeData to a Material ThemeData for use with Flutter’s Material widgets. MaterialApp ( theme : chromiaTheme. toMaterialTheme (), home : MyHomePage (), )
Returns true if this is a dark theme
Returns true if this is a light theme
Context Extensions Chromia UI provides convenient BuildContext extensions for easy access to theme data:
import 'package:chromia_ui/chromia_ui.dart' ; class MyWidget extends StatelessWidget { @override Widget build ( BuildContext context) { // Access the entire theme final theme = context.chromiaTheme; // Or access specific subsystems directly final colors = context.chromiaColors; final typography = context.chromiaTypography; final spacing = context.chromiaSpacing; final radius = context.chromiaRadius; final shadows = context.chromiaShadows; // Check theme brightness final isDark = context.isDarkTheme; final isLight = context.isLightTheme; return Container ( color : colors.surface, padding : spacing.paddingL, child : Text ( 'Hello World' , style : typography.bodyLarge. copyWith ( color : colors.textPrimary, ), ), ); } }
Available Extensions Returns the complete ChromiaThemeData
Returns the ChromiaColors from the current theme
context.chromiaTypography
Returns the ChromiaTypography from the current theme
Returns the ChromiaSpacing from the current theme
Returns the ChromiaRadius from the current theme
Returns the ChromiaShadows from the current theme
Returns true if the current theme is dark
Returns true if the current theme is light
Example: Complete Theme Setup Here’s a complete example showing how to set up theming in your app:
import 'package:flutter/material.dart' ; import 'package:chromia_ui/chromia_ui.dart' ; class MyApp extends StatefulWidget { @override State < MyApp > createState () => _MyAppState (); } class _MyAppState extends State < MyApp > { bool isDarkMode = false ; void toggleTheme () { setState (() { isDarkMode = ! isDarkMode; }); } @override Widget build ( BuildContext context) { final chromiaTheme = isDarkMode ? ChromiaThemeData . dark () : ChromiaThemeData . light (); return ChromiaTheme ( data : chromiaTheme, child : MaterialApp ( title : 'My App' , theme : chromiaTheme. toMaterialTheme (), home : MyHomePage (onToggleTheme : toggleTheme), ), ); } } class MyHomePage extends StatelessWidget { final VoidCallback onToggleTheme; const MyHomePage ({ required this .onToggleTheme}); @override Widget build ( BuildContext context) { final colors = context.chromiaColors; final typography = context.chromiaTypography; final spacing = context.chromiaSpacing; return Scaffold ( backgroundColor : colors.background, appBar : AppBar ( title : Text ( 'My App' ), actions : [ IconButton ( icon : Icon (context.isDarkTheme ? Icons .light_mode : Icons .dark_mode), onPressed : onToggleTheme, ), ], ), body : Padding ( padding : spacing.paddingL, child : Column ( crossAxisAlignment : CrossAxisAlignment .start, children : [ Text ( 'Welcome to Chromia UI' , style : typography.headlineMedium. copyWith ( color : colors.textPrimary, ), ), spacing.gapVM, Text ( 'A powerful Flutter design system' , style : typography.bodyLarge. copyWith ( color : colors.textSecondary, ), ), ], ), ), ); } }
Next Steps
Light & Dark Themes Learn how to implement light and dark themes
Custom Themes Create your own custom themes
Multi-Brand Configure multiple brands in one app
Design Tokens Explore the available design tokens
