Android 12 新增的動態色彩，可讓使用者自訂裝置，使其與個人桌布的色彩配置保持一致，或透過桌布挑選器中選取的顏色。
您可以透過新增 DynamicColors API 來運用這項功能，這項 API 會將此主題套用至應用程式或活動，讓應用程式更貼近使用者需求。
本頁面提供在應用程式中導入動態色彩的操作說明。此外，這項功能也適用於小工具和自動調整圖示，如本頁後續所述。您也可以試用程式碼研究室。
Android 如何建立色彩配置
Android 會執行下列步驟，從使用者的桌布產生色彩配置。
系統會偵測所選桌布圖片中的主色彩，並擷取來源顏色。
系統會使用該來源顏色進一步推算出五種主要顏色，分別是「Primary」、「Secondary」、「Tertiary」、「Neutral」和「Neutral variant」。
圖 2. 從桌布圖片擷取來源顏色並擷取至五個主要顏色的範例 系統會將每個主要顏色解讀為 13 種色調的調色盤。
圖 3 產生指定色調調色盤的範例 系統會使用這張單一桌布產生五種不同的色彩配置，做為所有淺色和深色主題的基礎。
使用者裝置如何呈現不同顏色子類
從 Android 12 開始，使用者可以從桌布擷取的顏色和不同主題中選取顏色變化版本，Android 13 則會新增更多變化版本。舉例來說，如果使用者的 Pixel 手機搭載 Android 13，則從「桌布和樣式」設定中選取變化版本，如圖 4 所示。
Android 12 新增了 Tonal Spot 變化版本，接著在 Android 13 中新增了 Neutral、Vibrant Tonal 和 Expressive 變化版本。每個變化版本都有獨特的食譜，可透過活潑的色彩和旋轉色調，將桌布的種子顏色轉換到使用者桌布。以下範例顯示透過這四種色彩變化來表達的單一配色方案。
應用程式仍會使用相同的符記存取這些顏色。如要進一步瞭解符號，請參閱本頁的「使用符號建立主題」一節。
開始使用 View
您可以在應用程式或活動層級套用動態色彩。如要這麼做，請呼叫 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>
Colors 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>
或者，您也可以使用質感設計主題建構工具匯入其他擴充色彩配置的色彩，進而建立統一的色彩系統。選取這個選項後，請使用 HarmonizedColors 移動自訂顏色的色調。搭配使用者產生的顏色，即可達到視覺平衡和可存取的對比效果。這個錯誤會在執行階段發生，並與 applyToContextIfAvailable() 相關。
請參閱 Material 3 的調和自訂顏色指南。
將動態色彩套用至自動調整圖示和小工具
除了在應用程式中啟用動態色彩主題設定外，您也可以從 Android 12 開始為小工具和從 Android 13 開始為自動調整圖示設定動態色彩主題。