Implementing Themes with Dark Mode

Theme Mode

Theme mode pertains to the selection mechanism that determines which theme (light or dark) should be applied to your app. Flutter provides the ThemeMode enumeration which has the following values:

ThemeMode.system: Use either the light or dark theme based on what the user has chosen in the system settings. If the system uses a light theme, your app will use ThemeData.light(), and if the system uses a dark theme, your app will use ThemeData.dark().

ThemeMode.light: Always use the light theme irrespective of the system setting. This utilizes the lightTheme property of the MaterialApp widget.

ThemeMode.dark: Always use the dark theme irrespective of the system setting. This uses the darkTheme property of the MaterialApp widget.

MaterialApp(
  theme: ThemeData.light(), // Light theme data
  darkTheme: ThemeData.dark(), // Dark theme data
  themeMode: ThemeMode.system, // Set theme mode
  home: MyHomePage(),
);

By adjusting the themeMode, you can switch between the themes as required. For instance, you might provide a setting within your app to allow users to manually choose between light, dark, or system themes. In such cases, you'll modify the themeMode value based on user preferences.

Text Theme

TextTheme is a class that holds a set of typographic styles. It provides a consistent way to configure and manage text styles for various parts of your app, such as headlines, titles, body text, and so forth.

TextTheme is commonly associated with the ThemeData class, which provides all the configuration for the appearance of your app.

ThemeData(
  textTheme: TextTheme(
    headline1: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold, color: Colors.red),
    bodyText1: TextStyle(fontSize: 14.0, color: Colors.black),
    // ... other styles
  ),
)

// implementation
Text(
  'This is a headline',
  style: Theme.of(context).textTheme.headline1,
),

It's a good practice to use the TextTheme provided by the theme because it ensures consistency across your app. By modifying the TextTheme in ThemeData, you can easily adjust the appearance of text throughout your application.