Macacoazul01/month_picker_dialog

'CANCEL' and 'OK' text invisible on dark mode

Jonathazn opened this issue · 7 comments

When ThemeMode is dark or ThemeMode is system and sytem theme is dark, the 'CANCEL' and 'OK' text color are the same as the background making it invisible.

2023-03-04 21_00_14-Window
2023-03-04 21_00_26-Window

@Jonathazn can you send me the themedata of your app to test?

static final fontFamily = GoogleFonts.poppins().fontFamily;

static const useMaterial3 = true;

static const purple = MaterialColor(
    0xFF8CBA80,
    {
      50: Color(0xFFEBEBEB),
      100: Color(0xFFD9D9D9),
      200: Color(0xFFBFBFBF),
      300: Color(0xFFA8A8A8),
      400: Color(0xFF939393),
      500: Color(0xFF797979),
      600: Color(0xFF6F6F6F),
      700: Color(0xFF646464),
      800: Color(0xFF5A5A5A),
      900: Color(0xFF474747),
    },
  );

static final darkTheme = ThemeData(
    useMaterial3: useMaterial3,
    brightness: Brightness.dark,
    colorSchemeSeed: purple,
    fontFamily: GoogleFonts.poppins().fontFamily,
  );

GoogleFonts package: google_fonts

When testing myself just now, it's the 'useMaterial3: true' that causes it. When it's false, the text has the same color as the header I think. When useMaterial3 is true, the body color is the same as the header color which causes the text to be invisible :)

2023-03-05 15_21_12-budget_management – main dart
2023-03-05 15_24_17-budget_management – main dart

There are some options here:

1-I can change the default part of the theme data that is being used to define the color of the buttons

2-You can use the parameters to define a custom version of them on your code.

By the images, besides 2 will fix your problem, 1 seems necessary

I'm not on my home to do this now, if you can help with 1, please send a PR and I'll check!

You'll need to change the colors on

lib/src/month_picker_widgets/button_bar.dart

Very well done!