Material 设计 3 将 colorPrimary 用于 actionBar、navBar 和日历背景色。我该如何禁用它?

Material Design 3 uses colorPrimary for actionBar, navBar and calendar background color. How do I disable this?

升级到 Material Design 3 后,我注意到某些东西的背景颜色变成了我的原色设置的褪色版本。例如,如果我将原色设置为红色,则导航栏和日历现在有点粉红色。

<style name="AppTheme" parent="Base.AppTheme" />

<style name="Base.AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/red</item>

</style>

我不知道为什么 Material 设计假设我想要这些背景颜色。我的设计文档需要白色背景,将主色设置为白色不是一种选择。如果我根本不设置原色,它默认为紫色!

我在导航栏上运气不错,因为你可以设置每个项目的背景颜色,但在日历上就不行了。我试过在日历样式上设置听起来与颜色相关的所有内容。到目前为止,除了 primaryColor 之外没有任何改变日历背景。 backgroundColor、backgroundTint 等。没有任何效果。有谁知道如何在 Material 设计 3 上覆盖此行为?

我只想将我的 colorPrimary 设置为绿色,并将 actionBar、navBar 和日历的背景颜色设置为白色。

根据 documentation 和我的测试,似乎 material 主题会自动为您未指定的匹配颜色。 我制作了一个简单的复制器来向您展示问题。

首先,仅设置 colorPrimary :

<style name="Base.AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/red1</item>
</style>

<color name="red1">#FB1100</color>

您可以看到为您设置的每种颜色的主题

对于您的情况,我相信您必须在正确的主题字段中设置自己的颜色,如下例所示。

解决方案

我制作了一个 POC 来测试行为(我知道颜色不符合 Material 指南,但它仅用于测试目的) 在这里你可以看到我的主题颜色与我设置的相匹配,而不是 Material 主题想要的。

<style name="Base.AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/red1</item>
    <item name="colorOnPrimary">@color/red2</item>
    <item name="colorPrimaryContainer">@color/red3</item>
    <item name="colorOnPrimaryContainer">@color/red4</item>
    <item name="colorPrimaryInverse">@color/red5</item>

    <item name="colorSecondary">@color/yellow1</item>
    <item name="colorOnSecondary">@color/yellow2</item>
    <item name="colorSecondaryContainer">@color/yellow3</item>
    <item name="colorOnSecondaryContainer">@color/yellow4</item>

    <item name="colorTertiary">@color/green1</item>
    <item name="colorOnTertiary">@color/green2</item>
    <item name="colorTertiaryContainer">@color/green3</item>
    <item name="colorOnTertiaryContainer">@color/green4</item>

    <item name="android:colorBackground">@color/blue1</item>
    <item name="colorOnBackground">@color/blue2</item>
    <item name="colorSurface">@color/purple1</item>
    <item name="colorOnSurface">@color/purple2</item>
    <item name="colorSurfaceVariant">@color/purple3</item>
    <item name="colorOnSurfaceVariant">@color/purple4</item>
    <item name="colorSurfaceInverse">@color/purple5</item>
    <item name="colorOnSurfaceInverse">@color/purple6</item>
</style>

<color name="red1">#FB1100</color>
<color name="red2">#FD3A2C</color>
<color name="red3">#FD6459</color>
<color name="red4">#FF9189</color>
<color name="red5">#FFBABA</color>

<color name="yellow1">#FFC800</color>
<color name="yellow2">#FFDC5C</color>
<color name="yellow3">#FFE896</color>
<color name="yellow4">#FFEEAF</color>

<color name="green1">#4FCA00</color>
<color name="green2">#8EFF46</color>
<color name="green3">#ADFF79</color>
<color name="green4">#C8FFA6</color>

<color name="blue1">#0048FF</color>
<color name="blue2">#487CFF</color>

<color name="purple1">#9500FF</color>
<color name="purple2">#AD3AFF</color>
<color name="purple3">#C169FF</color>
<color name="purple4">#D8A1FF</color>
<color name="purple5">#E6C2FF</color>
<color name="purple6">#F3E1FF</color>

在这里您可以看到我的组件使用的每种颜色都来自我的主题,而不是 Material 本身。 (我知道这些颜色令人毛骨悚然,但我故意这样做是为了识别每个字段类别(主要、次要、第三、背景、表面等)的行为

Disclaimer : I don't have your code so i can't tell you exactly which field you have to set, but you could easily use my values to find out which one is used to color your component

同样,这里是 documentation,您可以在其中找到 Material 默认主题的每个字段及其默认值。

希望这能帮助您解决问题,如果您需要更多帮助,请提供一个最小的复制器,以便我们可以尝试使用完全相同的配置。

祝你有愉快的一天!