Custom colors

[BaileySimrell]

The ability to utilize custom, extended colors from tailwind.config.js would be a great feature to have!

[mitrotasios]

hi @BaileySimrell, we are definitely planning to add this in the near future. Thanks for the patience 🙏

[BaileySimrell]

Makes sense, looking forward to it!

@mitrotasios do you know if there's a way I can easily override the array of colors that is pre-configured to better match my brand's styling?

I figured the place to do this would be in node_modules/@tremor/react/dist/esm/tremor.css .. however it doesn't look like there's an enumerated list of all colors and their bindings in this file as a root. For example, I'm seeing 11 instances of 'orange-300' used in classes in this file.

[mitrotasios]

hey @BaileySimrell, sorry for the late reply! You could technically go into the tremor stylesheet and overwrite a color that you don't use with your own hex code I suppose. That's not very convenient though. Also if you end up deploying the app, the package would be re-installed in your deployment pipeline and the changes will be lost. Another way could be to inspect the tree structure of the component and add some styling by having really specific CSS selectors. E.g. div > div > .someClassName > ... . I am sorry that there is no other way atm :( In which component would you like to change the colors? Is it the charts?

[BaileySimrell]

@mitrotasios I thought about doing this however the way the declarations are kind of configured in the stylesheet sort of made me feel like it would be too much of a hassle right now.

Overriding with really specific CSS selectors is probably the way to go for the time being, yeah. And yes, this is mainly a request relative to colors available in chart data, however I think overall it would be great if the library's base color options were able to be easily re-configured.

[jschuur]

I just ran into this where I wanted a lighter color for a BarList because I was using colored badges and wanted to get better contrast: