CODEWITHSUNDEEP
flutterthemesdarkmode
Laurent Thomas
Laurent Thomas

Reputation: 292

flutter Theme Dark/Light - not working when I use style: Theme.of(context).textTheme.headline5

I am implementing a Theme Dark & Light.

If I use this

title: Text("${singleProject.name}",),style: Theme.of(context).textTheme.headline5),

The text stay black even when I switch to Dark.

If I use this code

title: Text("${singleProject.name}",),

the text is changing his color depending if I am on light or dark mode. The problem in that case I can not use the font and the size I want for all my app.

Please, can you help?

text_theme

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class TTextTheme {

  static TextTheme lightTextTheme = TextTheme(

    subtitle1: GoogleFonts.openSans (color: Colors.black,
        fontWeight: FontWeight.bold,fontSize: 13.0),

    ///For subtitle Drawer Menu
    bodyText1: GoogleFonts.montserrat (color: Colors.black,
        fontWeight: FontWeight.normal,fontSize: 16.0),

    bodyText2: GoogleFonts.montserrat (color: Colors.black,
        fontWeight: FontWeight.bold,fontSize: 13.0),
    headline6: const TextStyle(fontSize: 30),

    ///For AppBar title
    headline1: GoogleFonts.openSans(color: Colors.white,
        fontWeight: FontWeight.bold, fontSize: 16.0),

    ///For Title Drawer Menu
    headline2: GoogleFonts.openSans(color: Colors.blue[900],
      fontWeight: FontWeight.bold, fontSize: 13.0),

    ///For tasks & Projects lists
    headline3: GoogleFonts.montserrat (color: Colors.black,
    fontWeight: FontWeight.normal,fontSize: 16.0,),

   /* headline4: GoogleFonts.montserrat (color: Colors.black,
        fontWeight: FontWeight.normal,fontSize: 16.0,
        decoration: TextDecoration.lineThrough,
        decorationThickness: 2.85,
        fontStyle: FontStyle.italic),
*/
    headline5: GoogleFonts.montserrat (color: Colors.black,
      fontWeight: FontWeight.normal,fontSize: 16.0,),

  );

  static TextTheme darkTextTheme = TextTheme(

      subtitle1: GoogleFonts.openSans (color: Colors.white,
          fontWeight: FontWeight.bold,fontSize: 13.0),

      ///For subtitle Drawer Menu
      bodyText1: GoogleFonts.montserrat (color: Colors.white,
          fontWeight: FontWeight.normal,fontSize: 16.0),

      bodyText2: GoogleFonts.montserrat (color: Colors.white,
          fontWeight: FontWeight.bold,fontSize: 13.0),
      headline6: const TextStyle(fontSize: 30),


      ///For AppBar title
      headline1: GoogleFonts.openSans(color: Colors.white,
          fontWeight: FontWeight.bold, fontSize: 16.0),

      ///For Title Drawer Menu
      headline2: GoogleFonts.openSans(color: Colors.blue[900],
          fontWeight: FontWeight.bold, fontSize: 13.0),

      ///For tasks & Projects lists
      headline3: GoogleFonts.montserrat (color: Colors.white,
        fontWeight: FontWeight.normal,fontSize: 16.0,),

      headline4: GoogleFonts.montserrat (color: Colors.white,
          fontWeight: FontWeight.normal,fontSize: 16.0,
          decoration: TextDecoration.lineThrough,
          decorationThickness: 2.85,
          fontStyle: FontStyle.italic),

    headline5: GoogleFonts.montserrat (color: Colors.white,
      fontWeight: FontWeight.normal,fontSize: 16.0,),

  );
}

theme_provider

import 'package:flutter/material.dart';
import 'package:my_gtd_20220804/theme/text_theme.dart';

class ThemeProvider extends ChangeNotifier {

  ThemeMode themeMode = ThemeMode.system;
  bool get isDarkMode => themeMode == ThemeMode.dark;

  void toggleTheme (bool isOn){
    themeMode = isOn? ThemeMode.dark : ThemeMode.light ;
    notifyListeners();
  }
}

class MyThemes {

  static final darkTheme = ThemeData(

    primarySwatch: Colors.grey,
    primaryColor: Colors.white,
    brightness: Brightness.dark,
    dividerColor: Colors.grey[300],
    scaffoldBackgroundColor: Colors.black,
    colorScheme: const ColorScheme.dark(),
    iconTheme: const IconThemeData(color: Colors.white),
    textTheme:  TTextTheme.darkTextTheme,
    backgroundColor: Colors.black,
    bottomAppBarColor: Colors.black,


  //  fontFamily: 'arimo',
  );



  static final lightTheme = ThemeData(

    primarySwatch: Colors.blue,
    primaryColor: Colors.black,
    brightness: Brightness.light,
    dividerColor: Colors.grey[300],
    scaffoldBackgroundColor: Colors.white,
    iconTheme: const IconThemeData(color: Colors.white),
    textTheme:  TTextTheme.lightTextTheme,
   // fontFamily: 'arimo',
     backgroundColor: Colors.white,
    bottomAppBarColor: Colors.white,
    // accentColor: Colors.red,
    // accentIconTheme: IconThemeData(color: Colors.white),
    // colorScheme: const ColorScheme.light(),
    // primaryColor: Colors.blue,

  );


  /*final menuTitleText = const TextTheme(
    subtitle2: 10,
  );
*/

}

Main

return MaterialApp(
                themeMode: themeProvider.themeMode,
                theme: MyThemes.lightTheme,
                darkTheme: MyThemes.darkTheme,

I also try

class MyThemes {

  static final darkTheme = ThemeData.dark().copyWith(

   // primarySwatch: Colors.grey,
    primaryColor: Colors.white,
    brightness: Brightness.dark,
    dividerColor: Colors.grey[300],
    scaffoldBackgroundColor: Colors.black,
    colorScheme: const ColorScheme.dark(),
    iconTheme: const IconThemeData(color: Colors.white),
    textTheme:  TTextTheme.darkTextTheme,
    backgroundColor: Colors.black,
    bottomAppBarColor: Colors.black,
  //  fontFamily: 'Noto Sans Japanese',
  //  fontFamily: 'arimo',
  );

Then, with

 Text(singleDocument.name!,                           style:Theme.of(context).textTheme.bodyText1),

Now, when I switch from light to dark mode, the text remain black.

Upvotes: 0

Views: 1159

Answers (2)

Abel
Abel

Reputation: 77

You're facing this problem because you're not using the right context in your app. To fix the issue you just have to do this

void main() {
 runApp(
  MaterialApp(
  themeMode: themeProvider.themeMode,
  theme: MyThemes.lightTheme,
  darkTheme: MyThemes.darkTheme,
  home: MyApp(),
 ),
);

Upvotes: 0

Gwhyyy
Gwhyyy

Reputation: 9196

This happens because you're implementing the TextTheme all by yourself, this leads you to specify every single property manually in order to get your expected result, instead of specifying ThemeData(), consider using the predefined ThemeData factory constructors such as ThemeData.light(), ThemeData.dark(), then override their properties with the copyWith, like this:

   // You need here to specify all properties by yourself
   static final darkTheme = ThemeData(
   // ...


   // Here you take the predefined dark theme and override its properties
   static final darkTheme = ThemeData.dark().copyWith(
   // ...

you can do the same thing for the light mode using ThemeData.light().copyWith(/*...*/)

Upvotes: 1

Related Questions