Custom Theme in Flutter

Flutter provides a great feature Theme to control UI. This allows developers to improve this design and also manage different custom themes (like dark). A theme describes the colors and typographic choices of an application. To know more about the theme please check flutter doc.

Read more about Flutter app development services from mobikul.

Before start let discuss some concept in Theme.

ThemeData class defines the configuration of the overall visual Theme for a MaterialApp or a widget subtree within the app.
The static Theme.of method finds the ThemeData value specified for the nearest BuildContext ancestor. This lookup is inexpensive, essentially just single HashMap access.

After defining a Theme, use it within your own widgets. Flutter’s Material widgets also use your Theme to set the background colors and font styles for AppBars, Buttons, Checkboxes, and more.

In this blog, I will implement a custom theme for both dark and light and also use common font for all widgets.
Let’s start.
First, create a Theme class and add color according to what you want in your app.


class AppTheme {
  AppTheme._();

  static Color _iconColor = Colors.blueAccent.shade200;
  static const Color _lightPrimaryColor = Color(0xFF546E7A);
  static const Color _lightPrimaryVariantColor = Color(0xFF546E7A);
  static const Color _lightSecondaryColor = Colors.green;
  static const Color _lightOnPrimaryColor = Colors.black;

  static const Color _darkPrimaryColor = Colors.white24;
  static const Color _darkPrimaryVariantColor = Colors.black;
  static const Color _darkSecondaryColor = Colors.white;
  static const Color _darkOnPrimaryColor = Colors.white;

  static final ThemeData lightTheme = ThemeData(
    appBarTheme: AppBarTheme(
      titleTextStyle: TextStyle(color:_darkSecondaryColor,fontFamily: "Roboto",fontWeight: FontWeight.bold,fontSize: 26 ),
      color: _lightPrimaryVariantColor,
      iconTheme: IconThemeData(color: _lightOnPrimaryColor),
    ),
    colorScheme: ColorScheme.light(
      primary: _lightPrimaryColor,
      primaryVariant: _lightPrimaryVariantColor,
      secondary: _lightSecondaryColor,
      onPrimary: _lightOnPrimaryColor,
    ),
    iconTheme: IconThemeData(
      color: _iconColor,
    ),
    textTheme: _lightTextTheme,
      dividerTheme: DividerThemeData(
        color: Colors.black12
      )

  );

  static final ThemeData darkTheme = ThemeData(
    scaffoldBackgroundColor: _darkPrimaryVariantColor,
    appBarTheme: AppBarTheme(
      color: _darkPrimaryVariantColor,
      iconTheme: IconThemeData(color: _darkOnPrimaryColor),
    ),
    colorScheme: ColorScheme.dark(
      primary: _darkPrimaryColor,
      primaryVariant: _darkPrimaryVariantColor,
      secondary: _darkSecondaryColor,
      onPrimary: _darkOnPrimaryColor,
      background: Colors.white12,
    ),
    iconTheme: IconThemeData(
      color: _iconColor,
    ),
    textTheme: _darkTextTheme,
      dividerTheme: DividerThemeData(
          color: Colors.black
      )  );

  static final TextTheme _lightTextTheme = TextTheme(
    headline1: _lightScreenHeading1TextStyle,
  );

  static final TextTheme _darkTextTheme = TextTheme(
    headline1: _darkScreenHeading1TextStyle,
  );

  static final TextStyle _lightScreenHeading1TextStyle =
  TextStyle(fontSize: 26.0,fontWeight:FontWeight.bold, color: _lightOnPrimaryColor,fontFamily: "Roboto");

  static final TextStyle _darkScreenHeading1TextStyle =
      _lightScreenHeading1TextStyle.copyWith(color: _darkOnPrimaryColor);
  
}

class AppTheme {

AppTheme._();

static Color _iconColor = Colors.blueAccent.shade200;

static const Color _lightPrimaryColor = Color(0xFF546E7A);

static const Color _lightPrimaryVariantColor = Color(0xFF546E7A);

static const Color _lightSecondaryColor = Colors.green;

static const Color _lightOnPrimaryColor = Colors.black;

static const Color _darkPrimaryColor = Colors.white24;

static const Color _darkPrimaryVariantColor = Colors.black;

static const Color _darkSecondaryColor = Colors.white;

static const Color _darkOnPrimaryColor = Colors.white;

static final ThemeData lightTheme = ThemeData(

appBarTheme: AppBarTheme(

titleTextStyle: TextStyle(color:_darkSecondaryColor,fontFamily: "Roboto",fontWeight: FontWeight.bold,fontSize: 26 ),

color: _lightPrimaryVariantColor,

iconTheme: IconThemeData(color: _lightOnPrimaryColor),

colorScheme: ColorScheme.light(

primary: _lightPrimaryColor,

primaryVariant: _lightPrimaryVariantColor,

secondary: _lightSecondaryColor,

onPrimary: _lightOnPrimaryColor,

iconTheme: IconThemeData(

color: _iconColor,

textTheme: _lightTextTheme,

dividerTheme: DividerThemeData(

color: Colors.black12

)

);

static final ThemeData darkTheme = ThemeData(

scaffoldBackgroundColor: _darkPrimaryVariantColor,

appBarTheme: AppBarTheme(

color: _darkPrimaryVariantColor,

iconTheme: IconThemeData(color: _darkOnPrimaryColor),

colorScheme: ColorScheme.dark(

primary: _darkPrimaryColor,

primaryVariant: _darkPrimaryVariantColor,

secondary: _darkSecondaryColor,

onPrimary: _darkOnPrimaryColor,

background: Colors.white12,

iconTheme: IconThemeData(

color: _iconColor,

textTheme: _darkTextTheme,

dividerTheme: DividerThemeData(

color: Colors.black

) );

static final TextTheme _lightTextTheme = TextTheme(

headline1: _lightScreenHeading1TextStyle,

);

static final TextTheme _darkTextTheme = TextTheme(

headline1: _darkScreenHeading1TextStyle,

);

static final TextStyle _lightScreenHeading1TextStyle =

TextStyle(fontSize: 26.0,fontWeight:FontWeight.bold, color: _lightOnPrimaryColor,fontFamily: "Roboto");

static final TextStyle _darkScreenHeading1TextStyle =

_lightScreenHeading1TextStyle.copyWith(color: _darkOnPrimaryColor);

}

Now call the Theme element.

Theme.of(context).textTheme.headline1
Theme.of(context).colorScheme.background

1 2	Theme.of(context).textTheme.headline1 Theme.of(context).colorScheme.background

I hope this code will help you better to understand Custom Theme in flutter. If you feel any doubt or query please comment below.

Thanks for the read this blog and if you want to visit my other blog click here.

flutter Theme

Debabrata Roy 28 April 2023

. . .

2 comments

James Apr 5, 2022 at 3:12 am

Hey If you are able to describe how to call theme.of a little clearer, and identigy the difference between the two images, I.E press this button go to dark mode

Debabrata Roy (Moderator) Apr 5, 2022 at 10:04 am
In my code, dark and light themes are managed according to the device and I didn’t use any button to active dark mode.
MaterialApp(title: ‘Flutter Demo’,
theme: AppTheme.lightTheme,
darkTheme: AppTheme.darkTheme,)

Thanks

Reply

Leave a Comment Cancel Reply

2 comments

Message Sent!