# ThemeData's accent properties have been deprecated

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




:::important
These breaking change docs are accurate, as of the release
under which they are published. Over time, the
workarounds described here might become inaccurate.
We don't, in general, keep these breaking change docs up
to date as of each release.

这些破坏性改动文档的准确性仅限于其发布时对应的版本。
随着时间的推移，文档中描述的方案可能会逐渐失效。
通常情况下，我们不会在每次发布新版本时都对这些文档进行同步更新。

The [breaking change index file](/release/breaking-changes)
lists the docs created for each release.

[破坏性改动列表](/release/breaking-changes) 
列出了每个版本的文档。

:::


## Summary

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][color-scheme-prop].
The `ColorScheme`'s [secondary color][] is now typically used instead of
`accentColor` and the [onSecondary color][] is used when a contrasting
color is needed.

## Context

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`][color-scheme-prop] and
[`textTheme`][text-scheme-prop] 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.

## Description of change

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

## Migration guide

### Application theme

[`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:

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

Code after migration:

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

### `accentColor`

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:

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

Code after migration:

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

### `accentColorBrightness`

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

### `accentTextTheme`

This was white [`TextStyle`]s 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:

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

Code after migration:

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

### `accentIconTheme`

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][].

## Timeline

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

## References

API documentation:

* [`ColorScheme`][]
* [`FloatingActionButton`][]
* [`FloatingActionButtonThemeData`][]
* [`TextStyle`][]
* [`TextTheme`][]
* [`Theme`][]
* [`ThemeData`][]

Relevant issues:

* [Issue #56918][]

Relevant PRs:

* [PR #81336][]

Other:

* [Material Theme System Updates][]


[accentColor]: https://api.flutter-io.cn/flutter/material/ThemeData/accentColor.html
[accentColorBrightness]: https://api.flutter-io.cn/flutter/material/ThemeData/accentColorBrightness.html
[accentIconTheme]: https://api.flutter-io.cn/flutter/material/ThemeData/accentIconTheme.html
[accentTextTheme]: https://api.flutter-io.cn/flutter/material/ThemeData/accentTextTheme.html
[`CheckboxTheme`]: https://api.flutter-io.cn/flutter/material/CheckboxTheme-class.html
[color-scheme-prop]: https://api.flutter-io.cn/flutter/material/ThemeData/colorScheme.html
[`colorScheme.onSecondary`]: https://api.flutter-io.cn/flutter/material/ColorScheme/onSecondary.html
[`colorScheme.secondary`]: https://api.flutter-io.cn/flutter/material/ColorScheme/secondary.html
[`ColorScheme`]: https://api.flutter-io.cn/flutter/material/ColorScheme-class.html
[Issue #56918]: https://github.com/flutter/flutter/issues/56918
[FloatingActionButton and ThemeData's accent properties]: /release/breaking-changes/fab-theme-data-accent-properties
[`FloatingActionButton`]: https://api.flutter-io.cn/flutter/material/FloatingActionButton-class.html
[`FloatingActionButtonThemeData`]: https://api.flutter-io.cn/flutter/material/FloatingActionButtonThemeData-class.html
[Material Design spec]: https://m3.material.io/styles/color
[Material Theme System Updates]: /go/material-theme-system-updates
[secondary color]: https://api.flutter-io.cn/flutter/material/ColorScheme/secondary.html
[onSecondary color]: https://api.flutter-io.cn/flutter/material/ColorScheme/onSecondary.html
[PR #81336]: https://github.com/flutter/flutter/pull/81336
[`TextStyle`]: https://api.flutter-io.cn/flutter/painting/TextStyle-class.html
[text-scheme-prop]: https://api.flutter-io.cn/flutter/material/ThemeData/textTheme.html
[`TextTheme`]: https://api.flutter-io.cn/flutter/material/TextTheme-class.html
[`Theme`]: https://api.flutter-io.cn/flutter/material/Theme-class.html
[`ThemeData`]: https://api.flutter-io.cn/flutter/material/ThemeData-class.html
[`ThemeData.estimateBrightnessForColor()`]: https://api.flutter-io.cn/flutter/material/ThemeData/estimateBrightnessForColor.html