https://kotlinlang.org logo
Title
t

Tgo1014

12/02/2021, 4:17 PM
Do I have to specify all Material3 colors? I would imagine
primaryContainer
would be generated from
primary
for example
c

Chris Sinco [G]

12/02/2021, 5:42 PM
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
t

Tgo1014

12/02/2021, 5:51 PM
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
c

Chris Sinco [G]

12/02/2021, 7:14 PM
Do you have a code snippet of your theme + colors code?
t

Tgo1014

12/02/2021, 7:24 PM
That’s how I setup the theme, when I can
MaterialTheme.colorScheme.primaryContainer
it shows the purple in the last image
c

Chris Sinco [G]

12/02/2021, 7:40 PM
What Composable are you using for that purple container? Card?
Also, are you using your own theme that wraps MaterialTheme?
I tried to repro locally on a new M3 project template, and overriding the non-dynamic color palettes is working
t

Tgo1014

12/02/2021, 9:01 PM
Weird, I’m using as it’s on the template, no changes. Using it as a color for Surface from the Material 3 package.
Yeah my theme wraps the Material one, it’s a project I started today, so not many differences from the default theme
I just tested in a brand new project and the same happens
I’ve a small sample here, I’ve set the main color as yellow but the
MaterialTheme.colorScheme.primaryContainer
paints the background as purple
c

Chris Sinco [G]

12/02/2021, 11:29 PM
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:
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.
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
Hope that helps
a

Albert Chang

12/03/2021, 12:03 AM
You can use the Material Theme Builder which can automatically generate most of the colors for you.
1
t

Tgo1014

12/03/2021, 8:22 AM
@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?
c

Chris Sinco [G]

12/03/2021, 8:30 AM
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
a

Albert Chang

12/03/2021, 8:31 AM
@Tgo1014 If you find the color is changed after you chose, choose it again and it'll be kept.
t

Tgo1014

12/03/2021, 8:33 AM
@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. 🤔
a

Albert Chang

12/03/2021, 8:39 AM
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.
c

Chris Sinco [G]

12/03/2021, 8:47 AM
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.
❤️ 1
1
r

Rick Regan

12/03/2021, 12:10 PM
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.
c

Chris Sinco [G]

12/03/2021, 6:17 PM
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.
:thank-you: 2
👍 1
👍🏽 1
cc @Nick Rout on Theme Builder feedback
❤️ 1
t

Tgo1014

12/08/2021, 10:24 AM
seems like it’s already updated to receive bright colors? Amazing!
a

Albert Chang

12/08/2021, 10:36 AM
Seems that it no longer changes the color you selected but still won’t actually use a bright color in the light theme.
t

Tgo1014

12/08/2021, 10:38 AM
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 👀
r

Rick Regan

12/08/2021, 12:35 PM
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.)
c

Chris Sinco [G]

12/08/2021, 4:17 PM
Looks like the updates came last week from Rody: https://twitter.com/rodydavis/status/1466850290511261698?s=20
If you have feature requests or bugs, please file them on GitHub: https://github.com/material-foundation/material-theme-builder
@Nick Rout and I can then follow up with Rody on things as well
r

Rick Regan

12/08/2021, 6:14 PM
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
👍 1
c

Chris Sinco [G]

12/08/2021, 6:56 PM
Thank you!