ThemeData's accent properties have been deprecated

The ThemeData accentColor, accentColorBrightness, accentIconTheme and accentTextTheme properties have been deprecated.

The Material Design spec no longer specifies or uses an "accent" color for the Material components. The default values for component colors are derived from the overall theme's color scheme. The ColorScheme's secondary color is now typically used instead of accentColor and the onSecondary color is used when a contrasting color is needed.

This was a small part of the Material Theme System Updates project.

As of Flutter 1.17, the ThemeData accent properties - accentColor, accentColorBrightness, accentIconTheme, and accentTextTheme - were no longer used by the Material library. They had been replaced by dependencies on the theme's colorScheme and textTheme properties as part of the long-term goal of making the default configurations of the material components depend almost exclusively on these two properties.

The motivation for these changes is to make the theme system easier to understand and use. The default colors for all components are to be defined by the components themselves and based on the color scheme. The defaults for specific component types can be overridden with component-specific themes like FloatingActionButtonThemeData or CheckBoxTheme. Previously, properties like accentColor were used by a handful of component types and only in some situations, which made it difficult to understand the implications of overriding them.

The ThemeData accentColor, accentColorBrightness, accentIconTheme and accentTextTheme properties have been deprecated because the Material library no longer uses them.

ThemeData values no longer need to specify accentColor, accentColorBrightness, accentIconTheme, or accentTextTheme.

To configure the appearance of the material components in about the same way as before, specify the color scheme's secondary color instead of accentColor.

Code before migration:

MaterialApp(
  theme: ThemeData(accentColor: myColor),
  // ...
);

Code after migration:

final ThemeData theme = ThemeData();
MaterialApp(
  theme: theme.copyWith(
    colorScheme: theme.colorScheme.copyWith(secondary: myColor),
  ),
  //...
)

The closest backwards compatible ColorScheme color is ColorScheme.secondary. To hew most closely to the latest Material Design guidelines one can substitute ColorScheme.primary instead. If a contrasting color is needed then use ColorScheme.onSecondary.

Custom components that used to look up the theme's accentColor, can look up the ColorScheme.secondary instead.

Code before migration:

Color myColor = Theme.of(context).accentColor;

Code after migration:

Color myColor = Theme.of(context).colorScheme.secondary;

The static ThemeData.estimateBrightnessForColor() method can be used to compute the brightness of any color.

This was white TextStyles for dark themes, black TextStyles for light themes. In most cases textTheme can be used instead. A common idiom was to refer to one TextStyle from accentTextTheme, since the text style's color was guaranteed to contrast well with the accent color (now ColorScheme.secondaryColor). To get the same result now, specify the text style's color as ColorScheme.onSecondary:

Code before migration:

TextStyle style = Theme.of(context).accentTextTheme.headline1;

Code after migration:

final ThemeData theme = Theme.of(context);
TextStyle style = theme.textTheme.headline1.copyWith(
  color: theme.colorScheme.onSecondary,
)

This property had only been used to configure the color of icons within a FloatingActionButton. It's now possible to configure the icon color directly or with the FloatingActionButtonThemeData. See FloatingActionButton and ThemeData's accent properties.

Landed in version: 2.3.0-0.1.pre
In stable release: 2.5

API documentation:

• ColorScheme
• FloatingActionButton
• FloatingActionButtonThemeData
• TextStyle
• TextTheme
• Theme
• ThemeData

Relevant issues:

• Issue #56918

Relevant PRs:

• PR #81336

Other:

• Material Theme System Updates

Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2024-04-04. View source or report an issue.