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 ?