https://kotlinlang.org logo
Join Slack
Powered by
Do I have to specify all Material3 colors? I would...
# compose
t
Do I have to specify all Material3 colors? I would imagine 
primaryContainer
would be generated from 
primary
for example
c
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
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
Do you have a code snippet of your theme + colors code?
t
That’s how I setup the theme, when I can 
MaterialTheme.colorScheme.primaryContainer
it shows the purple in the last image
c
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
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
MyApplication8.zip
c
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
You can use the Material Theme Builder which can automatically generate most of the colors for you.
➕ 1
t
@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
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
@Tgo1014 If you find the color is changed after you chose, choose it again and it'll be kept.
t
@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
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
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
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
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.
🙏 2
👍 1
👍🏽 1
cc @Nick Rout on Theme Builder feedback
❤️ 1
t
seems like it’s already updated to receive bright colors? Amazing!
a
Seems that it no longer changes the color you selected but still won’t actually use a bright color in the light theme.
t
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
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
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
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
Thank you!
4 Views
Open in Slack
PreviousNext
Powered by