让用户能够在您的应用中对颜色进行个性化设置

尝试使用 Compose 方式
Jetpack Compose 是推荐用于 Android 的界面工具包。了解如何在 Compose 中使用动态配色。
动态配色 - Material Design 3 →

Android 12 中新增的动态配色功能可让用户根据个人壁纸的配色方案或通过壁纸选择器中选择的颜色，对设备进行个性化设置。

您可以通过添加 DynamicColors API 来利用此功能，该 API 会将此主题应用于您的应用或 activity，从而让您的应用更具个性化 。

图 1. 根据不同壁纸派生的色调配色方案示例

本页包含在应用中实现动态配色的说明。 此功能还可单独用于 微件和自适应图标，如本页稍后所述。 您还可以尝试完成 Codelab。

Android 如何创建配色方案

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

  1. 系统会检测所选壁纸图片中的主要颜色，并 提取源颜色。

  2. 系统会使用该源颜色进一步推断出五种关键颜色 ，即主色、辅色、第三色、中性色和中性色 变体。

    来源颜色提取示例
    图 2. 从壁纸图片中提取源颜色并提取到五种关键颜色的示例

  3. 系统会将每种关键颜色解读为 13 色调的色调调色板。

    生成指定色调调色板的示例
    图 3. 生成给定色调调色板的示例

  4. 系统会使用此单个壁纸派生出五种不同的配色 方案，这为任何浅色和深色主题提供了基础。

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

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

图 4. 在壁纸设置中选择颜色变体（在 Pixel 设备上显示）

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

图 5. 不同颜色变体在单个设备上的外观示例

您的应用仍使用相同的令牌来访问这些颜色。如需详细了解令牌，请参阅本页上的使用令牌创建主题。

开始使用 View

您可以在应用或 activity 级别应用动态配色。为此，请调用 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>

使用令牌创建主题

动态配色利用设计令牌，使向 不同界面元素分配颜色的过程更加顺畅和一致。借助设计令牌，您可以为界面的不同元素语义分配颜色角色，而不是分配设定的值。这使得应用色调系统具有更高的 灵活性、可伸缩性和一致性，并且在 设计浅色和深色主题以及动态配色时尤其强大。

以下代码段展示了应用动态配色令牌后的浅色和深色主题示例，以及 相应的颜色 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 Theme Builder（可通过 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 Theme Builder 导入其他 颜色来扩展配色方案，从而创建统一的颜色系统。 使用此选项时，请使用 HarmonizedColors 来更改自定义 颜色的色调。当与用户生成的颜色结合使用时，这可以实现视觉平衡和可感知的对比度。 它会在运行时通过 applyToContextIfAvailable()发生。

图 6. 协调自定义颜色的示例

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

将动态配色应用于自适应图标和微件

除了在应用中启用动态配色主题之外，您还可以支持 微件的动态配色主题 ，从 Android 12 开始，以及 自适应图标的动态配色主题 ，从 Android 13 开始。