材料设计3使用ColorPrimary进行动作栏,Navbar和日历背景颜色。如何禁用此?

发布于 2025-01-22 10:29:04 字数 694 浏览 0 评论 0原文

升级到材料设计3后,我注意到某些事物的背景颜色变为我的主要颜色所设置的褪色版本。例如,如果我将主颜色设置为红色,则Navbar和日历现在有些粉红色。

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

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

</style>

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

我对Navbar有些运气,因为您可以设置每个项目的背景颜色,但是日历上没有运气。我尝试设置所有与日历样式相关的声音颜色的内容。到目前为止,除了初级色外,还没有任何改变日历背景。背景颜色,背景特征等。有人知道如何在材料设计3上覆盖这种行为吗?

我只想将我的色彩奖设置为绿色,并将ActionBar,Navbar和日历的背景颜色设置为白色。

After upgrading to Material Design 3, I noticed that the background colors of certain things changed to a faded version of whatever my primary color is set to. For example, if I set my primary color to Red, the navBar and Calendar are now somewhat pink.

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

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

</style>


I don't know why Material Design assumes that I want these background colors. My design documents require a white background, and setting the primary color to white is not an option. If I don't set a primary color at all, it defaults to purple!

I had some luck with navBar, because you can set the background color of each item, but no luck with the calendar. I've tried setting everything that sounds color related on a calendar style. So far nothing changes the calendar background except primaryColor. backgroundColor, backgroundTint, etc. Nothing has worked. Does anyone know how to override this behavior on Material Design 3?

I simply want to set my colorPrimary to green and set the background colors of actionBar, navBar, and calendar to white.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

忘你却要生生世世 2025-01-29 10:29:04

根据文档>文档以及我所测试的内容,它似乎是自动的材料主题找到尚未指定的匹配颜色。
我做了一个简单的复制品,向您展示了问题。

首先,只有colorPrimary设置:

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

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

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

“仅使用prientarcolor”

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

解决方案

我做了一个POC测试行为(我知道颜色不符合材料指南,但仅是出于测试目的)
在这里,您可以看到我的主题颜色匹配我设置的内容,而不是材料主题所需的。

<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>

在这里,您可以看到我的组件使用的每种颜色都是从我的主题而不是材料本身来源的。 (我知道它具有这些颜色的脆弱性,但我故意确定每个字段类别(主要,次级,第三纪,背景,表面等)的行为,

“

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

代码=“ https://m3.material.io/libraries/mdc-android/color-theming” rel =“ noreferrer”>文档您可以在其中找到材料默认主题的每个字段及其默认值。

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

祝你今天过得愉快 !

According to documentation and what i've tested, it seems material theme automatically find matching colors for you haven't specified.
I've made a simple reproducer to show you the problem.

First, with only colorPrimary set :

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

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

You can see theme set every color for you

test with only primaryColor

In your case, i believe you have to set your own colors in the correct theme field, like the following example.

Solution

I've made a POC to test behavior (I know colors don't match Material Guidelines, but it's for test purpose only)
Here you can see i've theme colors matching what i've set, and not what Material theme want.

<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>

Here you can see every color used by my components is sourced from my theme, and not by Material itself. (I know its cringy with theses colors, but I made it on purpose to identify behaviors for each field category (primary, secondary, tertiary, background, surface, etc)

enter image description here

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

Again, here is the documentation where you can find every field and its default value for Material default theme.

Hope this help you fix your problem, and if you need more help, please provide a minimal reproducer so we can try with the exact same config.

Have a nice day !

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文