从 MaterialComponents 迁移到 Material 3，如何将我的旧自定义 colors 用于新版本的材料

Question

我正在尝试将我当前的应用程序从MaterialComponents迁移到使用 newset 版本Material3我想将我的旧 colors（自定义颜色）用于工具栏和导航抽屉，但我对许多已更改的属性感到有点困惑，我无法确定哪些属性我需要做

跟随我的旧 colors 和我在我的应用程序中使用的主题

colors.xml

<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <color name="primaryColor">#1aae66</color>
    <color name="primaryLightColor">#5ee194</color>
    <color name="primaryDarkColor">#007d3a</color>

    <color name="secondaryColor">#1de9b6</color>
    <color name="secondaryLightColor">#6effe8</color>
    <color name="secondaryDarkColor">#00b686</color>

    <color name="primaryTextColor">@color/white</color>
    <color name="secondaryTextColor">#000000</color>


    <color name="lightGray">#F9F9F9</color>
    <color name="mediumGray">#D1D1D1</color>
    <color name="lightMediumGray">#80D1D1D1</color>
    <color name="gray">#A9000000</color>
    <color name="lighterGray">#ddd</color>
    <color name="darkGray">#4B4B4B</color>
    <color name="dark">#313C44</color>
    <color name="darker">#151B20</color>
    <color name="deepPurple">#4a148c</color>

    <color name="statusBarColor">@color/primaryDarkColor</color>
    <color name="contextualStatusBarColor">@color/darker</color>
    <color name="contextualActionBarColor">@color/dark</color>
    <color name="actionBarBackgroundColor">@color/primaryColor</color>
    <color name="buttonColor">@color/primaryColor</color>


    // Custom CardView Style
    <color name="strokeColor">@color/lightMediumGray</color>
    <color name="cardBackgroundColor">@color/white</color>
    <color name="cardBackgroundLightColor">#106200EA</color>
    <color name="titleColor">@color/darker</color>
    <color name="descriptionColor">@color/darkGray</color>
    <color name="backgroundColor">@color/lightGray</color>
    <color name="placeholderColor">@color/mediumGray</color>
    <color name="color_navigation_list_background">@color/white</color>

    <color name="favoritesIconColor">#F05D6E</color>
</resources>

colors夜版

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">

    <color name="primaryColor" tools:ignore="MissingDefaultResource">@color/darker</color>
    <color name="primaryLightColor" tools:ignore="MissingDefaultResource">@color/darkGray</color>
    <color name="primaryDarkColor" tools:ignore="MissingDefaultResource">@color/black</color>

    <color name="secondaryColor" tools:ignore="MissingDefaultResource">#4db6ac</color>
    <color name="secondaryLightColor" tools:ignore="MissingDefaultResource">#82e9de</color>
    <color name="secondaryDarkColor" tools:ignore="MissingDefaultResource">#00867d</color>

    <color name="primaryTextColor" tools:ignore="MissingDefaultResource">#ffffff</color>
    <color name="secondaryTextColor" tools:ignore="MissingDefaultResource">#000000</color>

    <color name="statusBarColor">@color/primaryDarkColor</color>
    <color name="actionBarBackgroundColor">@color/primaryColor</color>
    <color name="buttonColor">@color/deepPurple</color>


    // Custom CardView Style
    <color name="strokeColor">@color/mediumGray</color>
    <color name="cardBackgroundColor">@color/darker</color>
    <color name="cardBackgroundLightColor">#106200EA</color>
    <color name="titleColor">@color/mediumGray</color>
    <color name="descriptionColor">@color/mediumGray</color>
    <color name="backgroundColor">@color/dark</color>
    <color name="placeholderColor">@color/darker</color>
    <color name="color_navigation_list_background">@color/darker</color>
    <color name="favoritesIconColor">#F05D6E</color>


</resources>

主题灯

<resources>
    <!-- Base application theme. -->
    <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryVariant">@color/primaryDarkColor</item>
        <item name="colorOnPrimary">@color/primaryTextColor</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/secondaryColor</item>
        <item name="colorSecondaryVariant">@color/secondaryDarkColor</item>
        <item name="colorOnSecondary">@color/secondaryTextColor</item>

        <!-- Status bar color. -->
        <item name="android:statusBarColor">@color/statusBarColor</item>
        <!-- Customize your theme here. -->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionModeOverlay">true</item>
        <item name="actionModeBackground">@color/contextualActionBarColor</item>

        <item name="android:windowAnimationStyle">@style/WindowAnimationTransition</item>


    </style>

    <style name="WindowAnimationTransition">
        <item name="android:windowEnterAnimation">@android:anim/fade_in</item>
        <item name="android:windowExitAnimation">@android:anim/fade_out</item>
    </style>


    <style name="EmptyViewStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:gravity">center</item>
        <item name="android:textSize">@dimen/_18ssp</item>
        <item name="android:visibility">gone</item>
    </style>

    <style name="CustomActionBarStyle" parent="Widget.MaterialComponents.ActionBar.Primary">
        <item name="background">@color/primaryColor</item>
        <item name="android:textColorPrimary">@color/white</item>
        <item name="android:textColorSecondary">@color/white</item>

    </style>

    <style name="ThemeOverlay.AppCompat.navTheme">
        <!-- Color of text and icon when SELECTED -->
        <item name="colorPrimary">@color/primaryColor</item>

        <item name="background">@color/white</item>

        <!-- Background color when SELECTED -->
        <item name="colorControlHighlight">@color/mediumGray</item>

    </style>

    <style name="progressBarBlue" parent="@style/Theme.AppCompat">
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <style name="Divider">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">1dp</item>
        <item name="android:background">?android:attr/listDivider</item>
    </style>


    <style name="PostTitle">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">@color/titleColor</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="PostBody">
        <item name="android:textSize">15sp</item>
        <!--        <item name="android:textColor">@color/descriptionColor</item>-->
    </style>

    <style name="roundedImageViewRounded">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>


</resources>

主题之夜

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryVariant">@color/primaryDarkColor</item>
        <item name="colorOnPrimary">@color/primaryTextColor</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/secondaryColor</item>
        <item name="colorSecondaryVariant">@color/secondaryDarkColor</item>
        <item name="colorOnSecondary">@color/secondaryTextColor</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">@color/statusBarColor</item>
        <!-- Customize your theme here. -->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionModeOverlay">true</item>
        <item name="actionModeBackground">@color/contextualActionBarColor</item>

        <item name="android:windowAnimationStyle">@style/WindowAnimationTransition</item>

    </style>

    `
    <style name="CustomActionBarStyle" parent="Widget.MaterialComponents.ActionBar.Primary">
        <item name="background">@color/actionBarBackgroundColor</item>

        <item name="android:textColorPrimary">@color/white</item>

        <item name="android:textColorSecondary">@color/white</item>
    </style>

    <style name="ThemeOverlay.AppCompat.navTheme">

        <!-- Color of text and icon when SELECTED -->
        <item name="colorPrimary">@color/white</item>

        <!-- Background color when SELECTED -->
        <item name="colorControlHighlight">@color/mediumGray</item>

    </style>

    <style name="progressBarBlue" parent="@style/Theme.AppCompat">
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <style name="Divider">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">1dp</item>
        <item name="android:background">?android:attr/listDivider</item>
    </style>


    <style name="PostTitle">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">@color/titleColor</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="PostBody">
        <item name="android:textSize">15sp</item>
        <item name="android:textColor">@color/descriptionColor</item>
    </style>


</resources>

我所做的更改是将每个项目的父级更改为parent="Theme.Material3.Light">和parent="Theme.Material3.Dark">但我看到新主题没有使用我的旧 colors，例如选择抽屉里的项目它是黑色的，选中的 state 的背景是绿色现在有点紫色，工具栏是原色绿色现在是白色，选项菜单背景为浅绿色

抽屉变化的例子

Answer 1

这是因为当您使用 Material 2 时，您的导航抽屉将其活动项目指示器颜色设置为colorPrimary ，但是当您将其更改为 Material 3 时，它现在使用colorSecondaryContainer作为活动指示器。

材料 2： 导航抽屉 | 文字叠加属性

材料 3： 导航抽屉 | 项目属性

您可以阅读文档以获取颜色信息并将其更改为您的偏好。