A modern programming language that makes developers happier.

kotlinlang

Question about what options exist when using components from material3 (DatePicker) while not really having a m3 color scheme compatible color system in your app in:thread:

I want to use some component from material3 (DatePicker in particular) but I haven’t setup material3 in our app yet. Problem is, our color system really doesn’t fit the ColorScheme that material3 expects cause we don’t have that many colors (I do understand that material3 is a very opinionated design system etc.)

Now I’m looking for ways to having to write our own DatePicker impl by copying the m3 code, and introducing this big maintainability burden on ourselves. All this since I know that the DatePicker is in the alpha artifact now, so I’d like to if possible still be able to get all the changes that it will get as time goes, so would rather just use the m3 implementation of it.

So I wonder, has someone tried doing something like this who may have some tips? Like creating a material3 color scheme but with less colors than all that’s provided, more like what m2 was like? Do you see any room in the m3 color scheme to do something like giving the same color for some of the options?
I was thinking doing stuff that should hopefully make it still accessible, legible and all, while just not being as “cool”, like
Giving the same colors for: secondary = tertiary, onSecondary = onTertiary,
Potentially giving surface colors to the the container, secondaryContainer etc

So <https://developer.android.com/jetpack/compose/designsystems/material2-material3#color|this page> does give a reasonable start of where to initially do the mapping from.

Did a mapping like this for now and it’s servicable, will need to tweak it if it’s too odd for some cases, but it can serve as a starting point for others too
```| m3                   | m2                  |
|----------------------|---------------------|
| primary              | colorPrimary        |
| onPrimary            | colorOnPrimary      |
| secondary            | colorPrimaryVariant |
| onSecondary          | colorOnPrimary      |
| tertiary             | colorSecondary      |
| onTertiary           | colorOnSecondary    |
| primaryContainer     | colorSurface        |
| onPrimaryContainer   | colorOnSurface      |
| secondaryContainer   | colorSurface        |
| onSecondaryContainer | colorOnSurface      |
| tertiaryContainer    | colorSurface        |
| onTertiaryContainer  | colorOnSurface      |
| background           | colorBackground     |
| onBackground         | colorOnBackground   |
| surface              | colorSurface        |
| onSurface            | colorOnSurface      |
| surfaceVariant       | colorSurface        |
| onSurfaceVariant     | colorOnSurface      |
| surfaceTint          | colorSurface        |
| inverseSurface       | colorOnSurface      |
| inverseOnSurface     | colorSurface        |
| error                | colorError          |
| onError              | colorOnError        |
| errorContainer       | colorSurface        |
| onErrorContainer     | colorOnSurface      |
|                      |                     |
| outline              | -                   |
| outlineVariant       | -                   |
| scrim                | -                   |```
