Trying coolors.co with dynamic theme colors ... any advice ?

[kabeza]

Hi
I'm starting a new app with RNPaper and I'm choosing the main colors
I like this palette (for example)
https://coolors.co/palette/0d1b2a-1b263b-415a77-778da9-e0e1dd

But when I load the colors in the dynamic theme colors, some colors change from blue to green. Not even close (visually)
I know the tool is based on Material You color system and that "passed source color into the util is translated into tones to automatically provide the range of tones that map to color roles"
https://callstack.github.io/react-native-paper/docs/guides/theming/#creating-dynamic-theme-colors

But the final result (using the translated colors) will look kinda ugly

Any advice or suggestion?

PS: I know I could force and create just 5 custom colors and use that, but I'd like to have the light/dark choice for end-user and that both schemes look fine (I'm not a designer)

Thanks

[tjaniczek]

Hello @kabeza

Unfortunately can't help you with that as this is not a problem with our generator. The tool uses default theme builder from Material. If you paste the same colors in https://m3.material.io/theme-builder#/custom you'll get same results:

The issue here is that theme builder puts a lot of emphasis on accessibility and making sure all colors have good visibility when used together. The primary/secondary/ternary colors in theme are not meant to be used as base/light/dark variants. In this case they're quite often flattened to the same color due to accessibility constrains.

For best results use different hues for secondary/ternary and then use that to mark different UX contexts in your app.

I understand that having a tool to completely customise theme would be useful, yet goal of this project is to have 100% compatible Material Design implementation for React Native. That's why creating more permissive generator is not on our radar at the moment. Of course if there's an interest in the community, we might create one some time in the future.

Until that, if you want to disregard MD's color hierarchy you'll have to manually craft the theme yourself. Custom colors could help, just keep in mind we had a small bug there that will soon be resolved: #4033

Hope that helps!

[kabeza]

Thanks a lot @tjaniczek for the clarifications
I'll try the m3 material.io builder and choose the best possible blue scheme