CODEWITHSUNDEEP
textcolorsflutter
Mary
Mary

Reputation: 20465

How to change the entire theme's text color in Flutter?

There is probably something obvious I'm missing. Is there one property that can change the color of all the text in a Flutter app?

The way I am doing it now is, in my MaterialApp:

theme: ThemeData(
    textTheme: Theme.of(context).textTheme.copyWith(
          body1:
              Theme.of(context).textTheme.body1.apply(color: Colors.pink),
          body2:
              Theme.of(context).textTheme.body2.apply(color: Colors.pink),
          display1:
              Theme.of(context).textTheme.display1.apply(color: Colors.pink),
          display2:
              Theme.of(context).textTheme.display2.apply(color: Colors.pink),
          ... // and so on
        ),
    ),
),

I also tried 

textTheme: Theme.of(context).textTheme.apply(bodyColor: Colors.pink),

but this applies to Dropdown text, not regular text. Likewise, displayColor applies to the appBar text and a InputDecoration text, but not regular text. I don't seem to have any decorationText in my code so I'm not sure what that one is for.

I note there is a textSelectionColor property but that only applies for TextField widgets.

Upvotes: 151

Views: 161191

Answers (9)

Aleksandre aptsiauri
Aleksandre aptsiauri

Reputation: 11

This worked for me:

textTheme: const TextTheme(bodyMedium: TextStyle(color: Colors.white))

Upvotes: 1

Gökhan Mete ERTÜRK
Gökhan Mete ERTÜRK

Reputation: 4996

'bodyText1', 'bodyText2' and the likes are deprecated and shouldn't be used. Use bodyMedium, bodySmall, bodyLarge etc instead.

This feature was deprecated after v3.1.0-0.0.pre:
Documentation

An example to get you started quickly:

return MaterialApp(
  theme: ThemeData(
   textTheme: const TextTheme().copyWith(
    bodySmall: const TextStyle(color: Colors.red),
    bodyMedium: const TextStyle(color: Colors.red),
    bodyLarge: const TextStyle(color: Colors.red),
    labelSmall: const TextStyle(color: Colors.red),
    labelMedium: const TextStyle(color: Colors.red),
    labelLarge: const TextStyle(color: Colors.red),
    displaySmall: const TextStyle(color: Colors.red),
    displayMedium: const TextStyle(color: Colors.red),
    displayLarge: const TextStyle(color: Colors.red),
   ),
  ),
);

Upvotes: 3

Clansi Deena
Clansi Deena

Reputation: 1

Merge is used to change the color of text with the textTheme...

Text("Company",
style:Theme.of(context).textTheme.bodyText1?.merge(TextStyle(color: Colors.red),
)),

Upvotes: 0

Kdon
Kdon

Reputation: 1225

I found using copyWith() on the TextTheme works well, as you can just change specific properties like fontsize - leaving everthing else unchanged.


 textTheme: TextTheme().copyWith(
      bodyText2: TextStyle(
        fontSize: 30,
        fontWeight: FontWeight.bold
      )
    ),

Upvotes: 1

CopsOnRoad
CopsOnRoad

Reputation: 267544

For the entire app, you can set textTheme property in the Material app widget.

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText1: TextStyle(),
      bodyText2: TextStyle(),
    ).apply(
      bodyColor: Colors.orange, 
      displayColor: Colors.blue, 
    ),
  ),
)

Upvotes: 73

Uday
Uday

Reputation: 163

mine is working with this:

return MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText2: TextStyle(
        color: Colors.white,
      ),
    ),
  ),
);

Upvotes: 8

JawwDeek
JawwDeek

Reputation: 155

Maybe a bit late... but you can use this:

ThemeData(
    primaryTextTheme: Typography(platform: TargetPlatform.iOS).white,
    textTheme: Typography(platform: TargetPlatform.iOS).white,
)

Upvotes: 13

aqwert
aqwert

Reputation: 10789

To provide an alternative that seems to work without setting all the Text styles directly is to change the style of the DefaultTextStyle at the place in the Widget tree to take effect

return DefaultTextStyle(
  style: TextStyle(color: Colors.pink),
  child: _YOUR_WIDGETS_
)

Upvotes: 57

Yegor
Yegor

Reputation: 3189

I think TextTheme.apply is what you want. bodyColor will be applied to headline, title, subhead, button, body1, and body2. displayColor will be applied to display1 through display4, and caption. If you specify both bodyColor and displayColor and use the same color value, that will effectively change text colors on all text styles.

Example:

final newTextTheme = Theme.of(context).textTheme.apply(
  bodyColor: Colors.pink,
  displayColor: Colors.pink,
);

Upvotes: 195

Related Questions