Go Beyond Material: Add Custom Colors in your Flutter Theme

Flutter tips Published on

Want more control over your app's look and feel in Flutter? The default Material Design colors are a great start, but sometimes you need your own specific brand colors.

Luckily, Flutter lets you easily add your custom colors to your theme using ThemeExtension. This makes your colors available throughout your app, just like the standard theme colors.

Here’s a simple way to do it:

Define Your Colors

Create a class that extends ThemeExtension and list all your custom colors in it.

import 'package:flutter/material.dart';

class MyAppColors extends ThemeExtension<MyAppColors> {
  final Color primaryBrand;
  final Color secondaryBrand;
  // Add all your custom colors here

  const MyAppColors({
    required this.primaryBrand,
    required this.secondaryBrand,
  });

  // You'll need copyWith and lerp methods for ThemeExtension
  // (Simplified example below, you'll need the full implementation)
  
  MyAppColors copyWith({Color? primaryBrand, Color? secondaryBrand}) {
    return MyAppColors(
      primaryBrand: primaryBrand ?? this.primaryBrand,
      secondaryBrand: secondaryBrand ?? this.secondaryBrand,
    );
  }

  
  MyAppColors lerp(ThemeExtension<MyAppColors>? other, double t) {
    if (other is! MyAppColors) {
      return this;
    }
    return MyAppColors(
      primaryBrand: Color.lerp(primaryBrand, other.primaryBrand, t)!,
      secondaryBrand: Color.lerp(secondaryBrand, other.secondaryBrand, t)!,
    );
  }

  // You can add factory methods for light/dark themes here
  factory MyAppColors.light() => const MyAppColors(
    primaryBrand: Color(0xFF123456),
    secondaryBrand: Color(0xFFABCDEF),
  );

  // Add MyAppColors.dark() if you support dark mode
}

Add to Your Theme: Include your custom colors class instance in the extensions list of your MaterialApp's theme property.

MaterialApp(
  theme: ThemeData(
    // ... other theme properties
    extensions: <ThemeExtension<dynamic>>[
      MyAppColors.light(), // Or .dark() based on theme mode
    ],
  ),
  // ... rest of your app
)

3. Access Your Colors

Get your custom colors from anywhere in your app using BuildContext.

You can create a simple extension on BuildContext for easier access:

extension ThemeColors on BuildContext {
  MyAppColors get colors => Theme.of(this).extension<MyAppColors>()!;
}

Then, access your colors like this:

Container(
  color: context.colors.primaryBrand,
  // ...
)

Using ThemeExtension helps you manage your custom colors cleanly and makes them easy to access and update across your whole app.

Related Articles

You can also read more on how to create a custom theme and getting rid of the default Material theme in this article.

Save 3 months of work

Create your app using our 6 years of making Flutter apps and more than 50+ apps

kickstarter for flutter apps

Frequently Asked Questions

Why should I use ThemeExtension for colors?

It's the recommended way to add custom properties, like colors, to your app's theme. It keeps your code organized and makes your custom colors easily accessible everywhere.

Can I support light and dark modes with this?

Yes, you can create different instances of your custom colors class (e.g., `MyAppColors.light()` and `MyAppColors.dark()`) and provide the correct one based on the current theme mode.

Is this only for colors?

No, `ThemeExtension` can be used to add any custom properties to your theme, not just colors. You could add custom text styles, spacing values, or anything else you need.

Read more
You may also be interested in
Smart asking for rating  blog card image
Smart asking for rating
Published on 2025-04-28
Single Widget Responsive builder with DeviceSizeBuilder  blog card image
Single Widget Responsive builder with DeviceSizeBuilder
Published on 2025-05-12T08:40:40.806Z
ApparenceKit is a flutter template generator tool by Apparence.io © 2025.
All rights reserved