https://kotlinlang.org logo
#compose
Title
# compose
z

Zoltan Demant

10/17/2023, 12:26 PM
Is there any guidance available for how large selected items should be colored in M3? From what I can tell,
secondaryContainer
is the go-to for chips, navBar, drawerItems, etc; all of these being smaller elements, I feel like bigger ones should use something different? Screenshots show focused card (using d-pad), and the same thing with
secondaryContainer
.
a

ascii

10/17/2023, 12:51 PM
Perhaps the new tone-based surface colors are also meant for this? https://material.io/blog/tone-based-surface-color-m3
Personally, for the "more colorful" theme options (user choice), I overlay
surfaceTint
with varying opacities, e.g. .04 or .12
z

Zoltan Demant

10/17/2023, 12:57 PM
SurfaceContainerHighest
looks similar to the focused state I screenshotted above, but Im not sure if thats the intended use-case? If the absolute elevation is high enough, the card will have this color by default, I think. As for using surfaceTint, which color do you overlay it over?
surfaceTint.copy(alpha = 0.12f).compositeOver(surfaceContainer)
looks pretty nice. When using such a strong color as I was in screenshot #2, I just feel like the other colors become washed out and lose their purpose.
image.png
a

ascii

10/17/2023, 1:18 PM
I haven't overriden
surfaceContainer
in my theme yet, so I just use
surface
If the absolute elevation is high enough, the card will have this color by default, I think.
From what I've seen so far, I don't think any M3 component uses these new colors yet. Not NavBar, and not even Card.
https://m3.material.io/theme-builder doesn't generate them either
z

Zoltan Demant

10/17/2023, 1:30 PM
I think this looks good, so Ill use it! Thanks for pointing me to it. As for surfaceContainer, Im just using it so that surface != background (its a separate issue 😅 ). You can generate the themes in reverse by setting the colors/wallpaper, then extracting the colors from the generated dynamicColorScheme, probably not necessary unless you really really want those additional surface colors.
👍 1