Theme Customisation

Below is the file structure to reach the file for changing app theme.

├── docs
└── FlutKit
│   ├── android
│   ├── assets
│   ├── ios
│   ├── lib
│       └── apps
│       └── extensions
│       └── homes
│             ├── select_theme_dialog.dart        // Change app theme here
│       └── localizations
│       └── theme
│             ├── app_notifier.dart
│             ├── app_theme.dart          // Change app theme variables here
│             ├── custom_theme.dart       // Change custom app theme variables here
│             ├── theme_type.dart

Change App Theme

We can change theme of whole application in just a few steps. Let's see how it's done.

App Theme
Provider.of<AppNotifier>(context, listen: false).updateTheme(ThemeType.dark);
// For light theme write ThemeType.light else ThemeType.dark

Change App Theme Variables

Let's have a look at how to change the app theme of the application.

Light Theme
class AppTheme{
   ...
   static final ThemeData lightTheme = ThemeData(
     primaryColor: Color(0xff3C4EC5),               // Change primary color
    ...
     backgroundColor: Color(0xffffffff),            // Change background color
     scaffoldBackgroundColor: Color(0xffffffff),    // Change scaffoldBackgroundColor
     colorScheme: ColorScheme.light(
            primary: Color(0xff3C4EC5),             // Change primary color
            onPrimary: Color(0xffeeeeee),           // Change onPrimary color
            primaryVariant: Color(0xff3C4EC5),      // Change primaryVariant color
            secondary: Color(0xff3C4EC5),           // Change secondary color
            secondaryVariant: Color(0xffeeeeee),    // Change secondaryVariant color
            onSecondary: Color(0xffeeeeee),         // Change onSecondary color
            surface: Color(0xffeeeeee),             // Change surface color
            background: Color(0xffeeeeee),          // Change background color
            onBackground: Color(0xff495057),        // Change onBackground color
        ),
    );
}
Dark Theme
class AppTheme{
   ...
   static final ThemeData darkTheme = ThemeData(
     primaryColor: Color(0xff069DEF),               // Change primary color
    ...
     backgroundColor: Color(0xff1b1b1b),            // Change background color
     scaffoldBackgroundColor: Color(0xff1b1b1b),    // Change scaffoldBackgroundColor
     colorScheme: ColorScheme.dark(
            primary: Color(0xff069DEF),             // Change primary color
            onPrimary: Color(0xffffffff),           // Change onPrimary color
            primaryVariant: Color(0xff069DEF),      // Change primaryVariant color
            secondary: Color(0xff069DEF),           // Change secondary color
            secondaryVariant: Color(0xffffffff),    // Change secondaryVariant color
            onSecondary: Color(0xffffffff),         // Change onSecondary color
            surface: Color(0xffeeeeee),             // Change surface color
            background: Color(0xff1b1b1b),          // Change background color
            onBackground: Color(0xfff3f3f3),        // Change onBackground color
        ),
    );
}

Change Custom App Theme Variables

Let's have a look at how to change the custom theme of the app.

Custom Theme
CustomTheme({
   ...
      this.shoppingPrimary = const Color(0xff387D94),             // Change primary color
      this.shoppingOnPrimary = const Color(0xffFAF9F9),           // Change onPrimary color
      this.shoppingSecondary = const Color(0xffD2E7EE),           // Change secondary color
      this.shoppingOnSecondary = const Color(0xff387D94),         // Change onSecondary color
     });

Similarly, you can make changes in other apps like fitness, learning, etc.