Material Design 3 使用 colorPrimary 作为 actionBar、navBar 和日历背景颜色。我如何禁用此功能？

Question

升级到 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>

我不知道为什么材料设计假设我想要这些背景颜色。我的设计文档需要白色背景，并且无法将主色设置为白色。如果我根本不设置原色，它默认为紫色！

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

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

Answer 1

根据文档和我测试过的内容，似乎材质主题会自动找到您未指定的匹配颜色。我制作了一个简单的重现器来向您展示该问题。

首先，仅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>

在这里您可以看到我的组件使用的每种颜色都来自我的主题，而不是材质本身。（我知道这些颜色令人尴尬，但我故意这样做来识别每个字段类别（主要、次要、第三、背景、表面等）的行为

免责声明：我没有您的代码，所以我无法准确告诉您必须设置哪个字段，但您可以轻松地使用我的值来找出哪个字段用于为您的组件着色

同样，这里是文档，您可以在其中找到材质默认主题的每个字段及其默认值。

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

祝你今天过得愉快 ！