Theming colors at Scale - support dark mode - Flutter

Viewed 14

I need help with theming colors in my App in a scalable & strict way

I’m having to change my app branding & realizing I need search replace my Color Palette everywhere in my App

I have many UI components defined but I would just pass the colors like so :

class BrandListItem extends StatelessWidget {
...
  @override
  Widget build(BuildContext context) {
    return ListTile(
      tileColor: BrandColors.grey[400],
      iconColor: BrandColors.orange[200],
...
    );
  }
}

But now that I need to do rebranding & soon support Dark Mode - I’m realizing it’s not working out

Would anyone like to share with me how the structure their theming & color to support Dark Mode ?

Do you define your color palette with lots more details sort of like this ?

abstract class BrandColors {

  static Color listBackground = BrandColors.grey[400];
  static Color listTileIcon = BrandColors.orange[200];

  static const Map<int, Color> orange = {
    200: Color(0xFFD18281),
    300: Color(0xFFA58281),
    400: Color(0xFFB38281),
    500: Color(0xFFD28281),
  };

...

It would mean defining so many colors for each specific components so I’m not sure it’s the right approach ?

0 Answers
Related