How to set the color based on dark / light theme?

Question

I want to set a dark and a light color scheme and use it as a background color of containers.

Here is my code:

Container(
  padding: const EdgeInsets.all(kDefaultPadding),
  //change required here:
  decoration: const BoxDecoration(color: kDarkColor),
  child: ... ,
)

score 4 · Accepted Answer · answered Oct 10 '21 at 13:52

4

In your root file (main.dart) your entry point of the app is located. In general, you have a class MyApp which returns a MaterialApp widget. This out-of-the-box widget from the Flutter SDK lets you define your app´s theme. Here you can define the theme.

In your Container, you can assign the color directly via the color parameter. To refer to your theme data do this: Theme.of(context).backgroundColor for example.

answered Oct 10 '21 at 13:52

Jahn E.

1,228
3
6
21

FYI: You need to assign the color within the BoxDecoration if you e.g. use BoxDecoration parameters like shape. – Jahn E. Oct 12 '21 at 08:33
You can now do `Theme.of(context).colorScheme.background` to avoid deprecation – Sudeep Prasad Apr 01 '23 at 16:50

score 1 · Answer 2 · answered Oct 10 '21 at 13:50

You can use platformBrightness from MediaQuery.

final isDarkTheme = MediaQuery.of(context).platformBrightness == Brightness.dark;

  Container(
    padding: const EdgeInsets.all(kDefaultPadding),
    //change required here
    decoration: const BoxDecoration(color: isDarkTheme? kDarkColor: kLightColor),
    child: Column(
    // ...
  ),

Also see how to implement dark mode in flutter

score 1 · Answer 3 · answered Oct 10 '21 at 13:50

We can achieve this by reading the color from ThemeData.

Setting Themes

// light Theme
ThemeData lightThemeData(BuildContext context) {
  return ThemeData.light().copyWith(
    backgroundColor: Colors.grey.shade100,
  );
}

// dark Theme
ThemeData darkThemeData(BuildContext context) {
  return ThemeData.dark().copyWith(
    backgroundColor: Colors.grey.shade900,
  );
}

Configuring Theme in MaterialApp

      theme: lightThemeData(context),
      darkTheme: darkThemeData(context),

Finally using it

BoxDecoration(color: Theme.of(context).backgroundColor),

How to set the color based on dark / light theme?

3 Answers3