使用户能够个性化您的应用中的颜色体验

Android 12 中添加的动态颜色使⽤户能够个性化他们的设备，使其色调与他们个人壁纸的配色方案保持一致，或者通过壁纸选择器中选择的颜色来保持一致。

您可以通过添加DynamicColors API 来利用此功能，该 API 会将此主题应用于您的应用或活动，以使您的应用更个性化。

此页面包含在您的应用中实施动态颜色的说明。此功能还单独适用于小部件和自适应图标，如下文所述。您还可以尝试codelab。

Android 如何创建配色方案

Android 执行以下步骤以根据用户的壁纸生成配色方案。

系统检测选定壁纸图像中的主要颜色并提取源颜色。
系统使用该源颜色进一步推断出五种关键颜色，称为主要、次要、三级、中性和中性变体。

图 2. 从壁纸图像中提取源颜色的示例以及提取到五种关键颜色的示例
系统将每种关键颜色解释为包含 13 种色调的色调调色板。

图 3. 生成给定色调调色板的示例
系统使用此单个壁纸推导出五种不同的配色方案，这为任何浅色和深色主题提供了基础。

颜色变体在用户设备上的显示方式

从 Android 12 开始，用户可以选择从壁纸提取的颜色和不同的主题中的颜色变体，Android 13 中添加了更多变体。例如，运行 Android 13 的 Pixel 手机用户将从壁纸和样式设置中选择变体，如图 4 所示。

Android 12 添加了色调点变体，随后在 Android 13 中添加了中性、鲜艳色调和表现力变体。每个变体都有一个独特的配方，可以通过活力和旋转色相来转换用户壁纸的种子颜色。以下示例显示了通过这四种颜色变体表达的单个配色方案。

您的应用仍然使用相同的令牌来访问这些颜色。有关令牌的详细信息，请参阅本页上的使用令牌创建主题。

开始使用视图

您可以在应用或活动级别应用动态颜色。为此，请调用applyToActivitiesIfAvailable() 以将ActivityLifeCycleCallbacks 注册到您的应用。

Kotlin

class MyApplication: Application() {
    override fun onCreate() {
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

Java

public class MyApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();
    DynamicColors.applyToActivitiesIfAvailable(this);
  }
}

接下来，将主题添加到您的应用。

<style
    name="AppTheme"
    parent="ThemeOverlay.Material3.DynamicColors.DayNight">
    ...
</style>

使用令牌创建您的主题

动态颜色利用设计令牌使为不同的 UI 元素分配颜色更加简化和一致。设计令牌允许您为 UI 的不同元素语义地分配颜色角色，而不是设置值。这使您的应用的色调系统具有更大的灵活性和可扩展性以及一致性，在设计浅色和深色主题以及动态颜色时尤其强大。

以下代码片段显示了应用动态颜色令牌后，浅色和深色主题以及相应的颜色 xml 示例。

浅色主题

Themes.xml

<resources>
  <style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
    <item name="colorPrimary">@color/md_theme_light_primary</item>
    <item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
    <item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
    <item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
    <item name="colorError">@color/md_theme_light_error</item>
    <item name="colorOnError">@color/md_theme_light_onError</item>
    <item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
    <item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
    <item name="colorOnBackground">@color/md_theme_light_onBackground</item>
    <item name="colorSurface">@color/md_theme_light_surface</item>
    <item name="colorOnSurface">@color/md_theme_light_onSurface</item>
    …..
  </style>
</resources>

深色主题

Themes.xml

<resources>
  <style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
    <item name="colorPrimary">@color/md_theme_dark_primary</item>
    <item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
    <item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
    <item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
    <item name="colorError">@color/md_theme_dark_error</item>
    <item name="colorOnError">@color/md_theme_dark_onError</item>
    <item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
    <item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
    <item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
    <item name="colorSurface">@color/md_theme_dark_surface</item>
    <item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
    ……
  </style>
</resources>

颜色 xml

Colors.xml

<resources>
  <color name="md_theme_light_primary">#6750A4</color>
  <color name="md_theme_light_onPrimary">#FFFFFF</color>
  <color name="md_theme_light_primaryContainer">#EADDFF</color>
  <color name="md_theme_light_onPrimaryContainer">#21005D</color>
  <color name="md_theme_light_error">#B3261E</color>
  <color name="md_theme_light_onError">#FFFFFF</color>
  <color name="md_theme_light_errorContainer">#F9DEDC</color>
  <color name="md_theme_light_onErrorContainer">#410E0B</color>
  <color name="md_theme_light_surface">#FFFBFE</color>
  <color name="md_theme_light_onSurface">#1C1B1F</color>
  <color name="md_theme_light_surfaceVariant">#E7E0EC</color>
  <color name="md_theme_dark_primary">#D0BCFF</color>
  <color name="md_theme_dark_onPrimary">#381E72</color>
  <color name="md_theme_dark_primaryContainer">#4F378B</color>
  <color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
  <color name="md_theme_dark_secondary">#CCC2DC</color>
  <color name="md_theme_dark_onSecondary">#332D41</color>
  <color name="md_theme_dark_secondaryContainer">#4A4458</color>
  <color name="md_theme_dark_onSurface">#E6E1E5</color>
  <color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>

更多信息

要了解有关动态颜色、自定义颜色和生成令牌的更多信息，请查看 Material 3 动态颜色页面。
要生成基础颜色调色板以及您的应用的颜色和主题，请查看 Material 主题构建器，可通过Figma 插件或浏览器访问。
要了解有关使用配色方案如何在您的应用中实现更好的辅助功能的更多信息，请参阅有关颜色系统辅助功能的 Material 3 页面。

保留自定义颜色或品牌颜色

如果您的应用具有您不希望随用户的偏好而更改的自定义颜色或品牌颜色，则可以在构建颜色方案时单独添加它们。例如

Themes.xml

<resources>
    <style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
        ...
        <item name="home_lamp">@color/home_yellow</item>
          ...
    </style>
</resources>

Colors.xml
<resources>
   <color name="home_yellow">#E8D655</color>
</resources>

或者，您可以使用 Material 主题构建器导入扩展颜色方案的其他颜色，从而创建一个统一的颜色系统。使用此选项，请使用HarmonizedColors 来转换自定义颜色的色调。这在与用户生成的色彩组合时，可以实现视觉平衡和辅助对比度。它在运行时通过applyToContextIfAvailable()发生。

请参阅 Material 3 有关协调自定义颜色的指南。

将动态颜色应用于您的自适应图标和小部件

除了在您的应用上启用动态颜色主题外，您还可以从 Android 12 开始为小部件以及从 Android 13 开始为自适应图标支持动态颜色主题。