1

I'm using two different ThemeData classes for switching between dark and light mode. However I am using a color scheme which requires me to access the colors inside the swatch I have defined.

static const int _greyPrimaryValue = 0xFF1E1E1E;
static const MaterialColor darkSwatch = MaterialColor(
    _greyPrimaryValue,
    <int, Color>{
      0: Color(0xFF000000),
      50: Color(_greyPrimaryValue),
      100: Color(0xFF222222),
      200: Color(0xFF242424),
      300: Color(0xFF272727),
      400: Color(0xFF2C2C2C),
      500: Color(0xFF2E2E2E),
      600: Color(0xFF333333),
      700: Color(0xFF353535),
      800: Color(0xFF383838),
      900: Color(0xFF424242),
    },
  );

get darkTheme => ThemeData(
   primaryColor: darkSwatch.shade50,
   primarySwatch: darkSwatch,
)

Is there a way to acces the values in my primarySwatch? I can use Theme.of(context) to access different values like primaryColor. Is there a way to access the colors I defined inside my swatch instead of assigning them to different keys in ThemeData? Otherwise what's the point of creating a swatch?

Wanted behaviour

Container(
   color: Theme.of(context).primarySwatch.shade100,
)

Current situation

bool _isDarkTheme = Theme.of(context).brightness == Brightness.dark;

Container(
   color: _isDarkTheme ? lightSwatch.shade100 : darkSwatch.shade100
)

1 Answer 1

0

Theme.of(context).primaryColor and Theme.of(context).colorScheme.primary are of type Color. primarySwatch is a MaterialColor which inherits from Color. You need to cast your primary color as a Materialolor to get the shades of your swatch:

((Theme.of(context).colorScheme.primary) as MaterialColor).shade900

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.