change text color in dark theme in lfutter

Question

I have defined a separate class for TextTheme and defined the desired textStyle, assigning it to the ThemeData for both light and dark themes, as shown in the image. However, the textColor is not being applied in the dark mode.

When I use two separate TextTheme classes to define styles, it works correctly, but it requires writing more code.

I want to apply color styles to both light and dark themes using a single code source for styling. how can i do this? (i use getx)

my TextTheme:

class MyTextTheme {
  static const String fontFamily = 'Vazir';
  static TextTheme myTextTheme = TextTheme(
    titleLarge: TextStyle(
        fontSize: 25,
        fontWeight: FontWeight.w700,
        color: Get.isDarkMode
            ? Color.fromARGB(255, 255, 242, 231)
            : Color.fromARGB(255, 137, 116, 253)),
//

my Theme

  static final lightTheme = ThemeData(
      buttonTheme: const ButtonThemeData(
        buttonColor: Colors.green,
      ),
      primaryColor: Color.fromARGB(255, 62, 104, 167),
// elevetedButtom style
      elevatedButtonTheme: MyButtonStyle.myElevetedButton,
// primery colors
      colorScheme: ColorScheme.fromSwatch(
        backgroundColor: Colors.white,
      ),
      fontFamily: MyTextTheme.fontFamily,
      brightness: Brightness.light,
      // useMaterial3: true,
// text styles
      textTheme: MyTextTheme.myTextTheme);

  //!dark theme propertys
  static final darkTheme = ThemeData(
    //elevetedButton Style
    elevatedButtonTheme: MyButtonStyle.myElevetedButton,
    fontFamily: MyTextTheme.fontFamily,
    colorScheme: ColorScheme.dark(),
    textTheme: MyTextTheme.myTextTheme,
  );
}

Change theme code: enter image description here

I have clarified that the problem is with the textColor, not the textStyle as a whole. I have clarified that using two separate TextTheme classes is a workaround, but it is not ideal.

This is standard practice to separate white and dark theme styling. I think your implementation is okay. — Zakaria Hossain, Aug 26 '23 at 12:35
MyTextTheme.myTextTheme is static and only created once, isn't it? — Kahou, Aug 26 '23 at 13:27
yes it is. but i dont now why it dosn't work... the text color in dark mode dosn't change — Hossein Saeedi, Aug 26 '23 at 14:24

Kahou · Answer 1 · 2023-09-01T13:54:19.743

Because [lightTheme.textTheme] and [dartTheme.textTheme] are the same

It declares the same [textTheme] at the beginning

class MyTextTheme {
  static TextTheme myTextTheme = TextTheme(
    titleLarge: TextStyle(
      color: Get.isDarkMode ? Colors.white : Colors.black,
    ),
  );
}

final lightTheme = ThemeData(
  // titleLarge.color is Colors.white
  textTheme: MyTextTheme.myTextTheme, 
);

final darkTheme = ThemeData(
  // titleLarge.color is also Colors.white (not Colors.black)
  textTheme: MyTextTheme.myTextTheme, 
);

It just switches the theme from [lightTheme] to [darkTheme]

Get.changeThemeMode(ThemeMode.dark);

You can change `myTextTheme` to function

class MyTextTheme {
  /// Returns a TextTheme that changes the color of the titleLarge text style
  /// depending on the current theme mode.
  static TextTheme getTextTheme(ThemeMode mode) {
    return TextTheme(
      titleLarge: TextStyle(
        /// The color of the text is white in light mode and black in dark mode.
        color: mode == ThemeMode.dark ? Colors.white : Colors.black,
      ),
    );
  }
}

/// The light theme uses the MyTextTheme.getTextTheme(ThemeMode.light) method
/// to create a TextTheme with a white titleLarge text style.
final lightTheme = ThemeData(
  textTheme: MyTextTheme.getTextTheme(ThemeMode.light),
);

/// The dark theme uses the MyTextTheme.getTextTheme(ThemeMode.dark) method
/// to create a TextTheme with a black titleLarge text style.
final darkTheme = ThemeData(
  textTheme: MyTextTheme.getTextTheme(ThemeMode.dark),
);

change text color in dark theme in lfutter

1 Answers1

Because [lightTheme.textTheme] and [dartTheme.textTheme] are the same

You can change myTextTheme to function

You can change `myTextTheme` to function