Do I have to specify all Material3 colors? I would...

# compose

[Tgo1014]

Do I have to specify all Material3 colors? I would imagine primaryContainer would be generated from primary for example

[Chris Sinco [G]]

No, there should be smart defaults for light and dark colors. This is at least the case in Material2 (screenshot), not sure what it looks like for M3

[Tgo1014]

The smart colors works fine if I use the dynamic theme, but If I’m trying to use my own color scheme setting the primary color and use the `primaryContainer`for example, it uses some weird default purple instead of one based in my primary

[Chris Sinco [G]]

Do you have a code snippet of your theme + colors code?

[Tgo1014]

That’s how I setup the theme, when I can MaterialTheme.colorScheme.primaryContainer it shows the purple in the last image

[Chris Sinco [G]]

What Composable are you using for that purple container? Card?

[Chris Sinco [G]]

Also, are you using your own theme that wraps MaterialTheme?

[Chris Sinco [G]]

I tried to repro locally on a new M3 project template, and overriding the non-dynamic color palettes is working

[Tgo1014]

Weird, I’m using as it’s on the template, no changes. Using it as a color for Surface from the Material 3 package.

[Tgo1014]

Yeah my theme wraps the Material one, it’s a project I started today, so not many differences from the default theme

[Tgo1014]

I just tested in a brand new project and the same happens

[Tgo1014]

I’ve a small sample here, I’ve set the main color as yellow but the MaterialTheme.colorScheme.primaryContainer paints the background as purple

MyApplication8.zip

[Chris Sinco [G]]

Gotcha thanks for the sample! So not sure you are setting primaryContainer in your theme, but you to need to as primary and primaryContainer resolve to two different colors when not using dynamic color theming. That is, there are baseline color schemes (light and dark) in Material3 that are used. Example of the dark palette from source:

[Chris Sinco [G]]

For example, in the project template, we give you this LightColorScheme to start with, but you can override all the colors in it, or choose not to, which then will default to a baseline light color palette.

[Chris Sinco [G]]

I see you commented out the dynamic color check which is fine, but then it means that you will need to set the colors yourself IF you don’t want to use the default ones

[Chris Sinco [G]]

Hope that helps

[Albert Chang]

You can use the Material Theme Builder which can automatically generate most of the colors for you.

[Tgo1014]

@Chris Sinco [G] Thanks for the explanation! In my mind after setting the primary color the scheme would generate all other “primaries” based on it so I shouldn’t need to worry about it.
@Albert Chang Thank you so much! This builder is really amazing. Do you know if there’s something like this which would allow a bit more vibrant colors?

[Chris Sinco [G]]

I see. Yeah, it's not designed that way even with dynamic colors. What happens is the entire color scheme is generated based on either a seed image or seed color (as demonstrated in the theme builder). So if you have a "primary" color, you can use the tool to generate a holistic color scheme. I put primary in quotes because in that context it might mean your brand color or most important color. When used in the Material theme context, it's more about what role your color plays relative to the UI component. This guide explains it in more detail: https://m3.material.io/styles/color/the-color-system/color-roles#55d2b7d2-0202-4616-887e-f575a7946aac

[Albert Chang]

@Tgo1014 If you find the color is changed after you chose, choose it again and it'll be kept.

[Tgo1014]

@Chris Sinco [G] Thanks! I’ll take a look to understand it better.
@Albert Chang Doesn’t seem to be working for me. I choose the brightest orange and it goes to a muted tone, I selected it again and it keeps changing. 🤔

[Albert Chang]

Ok I think it's in order to maintain the contrast between that color and background/surface color. Using a bright color on a white surface hurts accessibility.

[Chris Sinco [G]]

Yeah, the tool tends to mute colors for that reason. But not to say the algorithms can't be tweaked. I imagine there's a balance between doing the "right" thing of generating a theme that is fully a11y compliant, and just generating interesting themes without that constraint.

[Rick Regan]

I thought it was just me having Material Theme Builder change my colors (it was making me crazy 🙂). Are you saying the tool changes your primary color on purpose if it can't "seed" an accessible theme? In my case, I can't get the color close to what I (thought I) wanted it to be.

[Chris Sinco [G]]

Yes that is what happens at the moment. But I think the tool can be improved for sure. I can forward your feedback to the Material team as I’ve seen this happen with others who want to generate a tasteful palette but not have it be so muted.

[Chris Sinco [G]]

cc @Nick Rout on Theme Builder feedback

[Tgo1014]

seems like it’s already updated to receive bright colors? Amazing!

[Albert Chang]

Seems that it no longer changes the color you selected but still won’t actually use a bright color in the light theme.

[Tgo1014]

Looks like it still is opinionated about the color, but not as drastic as before. I choose the brightest red and, even tho it uses a “not super bright version” at least it’s not going to the super muted red it was choosing before, so maybe they are still working on it 👀

[Rick Regan]

Thanks for the change (key colors now stay as selected). I also like the ability to add extended colors but the generated theme does not include the onCustom/CustomContainer/onCustomContainer etc. definitions (for either light or dark theme) as shown on the screen. (I am using the web version, Custom tab.)

[Chris Sinco [G]]

Looks like the updates came last week from Rody: https://twitter.com/rodydavis/status/1466850290511261698?s=20

[Chris Sinco [G]]

If you have feature requests or bugs, please file them on GitHub: https://github.com/material-foundation/material-theme-builder

[Chris Sinco [G]]

@Nick Rout and I can then follow up with Rody on things as well

[Rick Regan]

Thanks for pointing me to that page. I opened a feature request for exporting the extended colors: https://github.com/material-foundation/material-theme-builder/issues/22

[Chris Sinco [G]]

Thank you!