Can I add support for dark mode without using the ...

# compose

[Gulshan Patidar]

Can I add support for dark mode without using the lightColorScheme() or darkColorScheme(), or in other words without providing primary, secondary, tertiary colors, (basically material colors) instead by providing my custom names for the colors?
One can always add if else conditions each time when adding colors to components, but is there a straightforward solution exists?

[Stylianos Gakis]

You can theoretically provide some similar values for some of those color slots. But you might fall into problems like some items not looking nice together as the design system expects a different color but you gave it the same color.
For example, for our M3 theme, we’ve “copied” the M2 theme and did this. As you can tell a bunch of the colors are the exact same for a bunch of the colors, where the mapping is explained here.

But the important part of all this, is that m3 is a design system with its own expectations and limitations. The reason all these exist is so that the component it provides use them appropriately. As soon as you steer away from where that design system is pointing you at, you have to be ready to fight the system at least a little bit.

[Gulshan Patidar]

I don't want to follow the M3 system, just wanted to follow the M2. My only concern is that ColorScheme supports 29 colors, so what if I need more than 29 colors? Do you have any idea about it?

[Stylianos Gakis]

Well of you need to follow m2 you can straight up try out the mapping I've made for myself and see how that looks like. Then go from there and adjust accordingly to your needs.

As far as extending the existing colors, take a look at https://developer.android.com/jetpack/compose/designsystems/custom and particularly https://developer.android.com/jetpack/compose/designsystems/custom#extending-material

[Gulshan Patidar]

Got it. Thanks a lot man.

[Stylianos Gakis]

To do this "properly" you'd normally follow the instructions here https://developer.android.com/jetpack/compose/designsystems/material2-material3#color and use the color generation tool to get the new color scheme. It clearly states there's no mapping of colors from m2 to m3. But since realistically you can't do that without changing the entire design by a lot, just try what I did first and go from there 😊 that was my compromise too.

[Chris Sinco [G]]

In general, the Material theming system is a system that can be overridden. ColorScheme helps with mapping colors to known pairs or sets of colors that make sense for UI components, e.g. Button, Card. But what those color values actually resolve to is completely in your control. lightColorScheme and darkColorScheme are just baseline color palettes provided by the Material system as a start, but you don't have to use them. You can generate other palettes with the theme builder to make it easier, i.e. generate colors that provide great contrast with each other, or do it all yourself.

[Chris Sinco [G]]

As mentioned above, there are ways to customize, extend, and entirely replace the Material theming system. In a recent sample project, I chose to create two different themes based on different contexts. Both used Material underneath but I set all the color values myself. https://github.com/c5inco/compose-pokedexer/blob/main/app/src/main/java/des/c5inco/pokedexer/ui/theme/AppTheme.kt