Allow for custom colors

[zachterrell57]

Hello, just wanted to say that this is an awesome project and l hope to use it in production. However, as other developers have mentioned, I don't think I'll be able to use this library until I have the ability to use custom colors defined in tailwind.config. This is purely for branding reasons of course. Is this feature currently on the roadmap? Or are you guys sticking to the strictly-opinionated model? Respect the decision either way.

[mitrotasios]

Hey @zachterrell57, thanks for the kind words and for the point you're raising! It is valid and we are busy at the moment gathering all the feedback we can get in order to (re-)evaluate our design for the next major release. We cannot give a definite answer yet unfortunately, but we will definitely consider this as it came up often.

Would if be ok if we reach out to you in the future to discuss such decisions? Would really appreciate this.

[acdvs]

I just found this project and I have the same concern. I'd love to use this in a complex service I'm currently building, but branding is a top priority. I'm currently building all my components from scratch because there isn't another elegant and expansive library built on Tailwind. I'd like to think this would be a big issue for a lot of others as well.

[thornec]

Hello! Also wanted to add our team has started to use this library for developing our dashboard, it is amazing but I agree it is a definitely and expectation that you can use custom colors, specifically in the bar chart.

[zachterrell57]

Hey @zachterrell57, thanks for the kind words and for the point you're raising! It is valid and we are busy at the moment gathering all the feedback we can get in order to (re-)evaluate our design for the next major release. We cannot give a definite answer yet unfortunately, but we will definitely consider this as it came up often.

Would if be ok if we reach out to you in the future to discuss such decisions? Would really appreciate this.

Absolutely! Feel free to reach out whenever.

[mitrotasios]

thanks everyone, we really appreciate the feedback! We try to build tremor together with the community and this feedback came up a lot, so we are definitely leaning to a more customisable architecture for our next major release.

[ghost]

Just reporting an issue, when using the colors "white" or "black" in textual components, the color became a default blue.

[mitrotasios]

Hi @lsimunec, thanks for your comment! we do currently not support white and black as input colors, this is why that behaviour is expected, i.e. the default color blue is being set. We will add these colours as inputs soon though.

[ghost]

Hi @mitrotasios great, thank you for this awesome library :)

[eriklange]

My company also requires custom colors for branding, so this is a necessary feature for us. I created a workaround which I'll use until the feature is available.

MyDonut.tsx

<div className={styles.donut}>
    <Donut
        data={genderSessionLength}
        category="sales"
        dataKey="name"
        marginTop="mt-6"
        showLabel={false}
    />
</div>

MyDonut.module.scss

.donut {
    [class="recharts-layer recharts-pie-sector"]:nth-of-type(1) > path {
        fill:yellow;
    }

    [class="recharts-layer recharts-pie-sector"]:nth-of-type(2) > path {
        fill:blue;
    }
}

Explanation

The donut sections are path elements, where each path has a parent element g with class recharts-layer recharts-pie-sector. The g parents are siblings, which allows us to use the nth-of-type selector.

The styling applies a certain fill to the path below the nth donut section.

[imclint21]

Just installed tremor in our customer dashboard, and what I see, impossible to use custom colors..

This is definitely a must have, tremor looks have brillant future but how many companies will not use it without custom branding?

[djkgamc]

Agreed on inability to use w/o custom colors. I think if you had put it in the documentation a little bit more explicitly, then I wouldn't have used Tremor at all at the moment. I think the documentation does say the limitation, I just didn't fully understand it was hard limiation. I just finished everything in Tremor, but now am going to reimplement the whole thing in another library for this reason.

[mitrotasios]

Custom colouring or theming is the next big thing on our roadmap. We don't have a timeline on this as there are certain challenges regarding customisation given our tailwind dependency.

@djkgamc, sorry that you had this experience. IMO exploring the limitations of a tool should be the responsibility of the end user, therefore I don't think adding a disclaimer is appropriate.

[djkgamc]

Great to know it's on the roadmap! Did it anyway because we had to, but it was such a PITA to implement charts in anything else after using Tremor :)

[dhruvik7]

@mitrotasios is there any update or ETA on custom colors?

[mitrotasios]

sorry, unfortunately there's no particular ETA on this, it may take some time tbh as we are currently busy with other stuff as well. We are also open to contributions from the community and to suggestions on how to solve this elegantly :)

[ReduxMPX]

Can also vouch that we need this 🙏🏼

[gilartw]

Please help me for lengue programmer i will be it. Showing me slowly about programmer. Sorry i promise us. Apology. I will be sharing with us.

[jacksolomonprime]

I have a similar issue with the line chart - I want custom colors for my lines. I've found the following workaround pretty easy and works 100% of the time (as far as I can tell). In this case, past is the name of the line (I only want to edit one line's color, and use a default for the other), and I'm setting the new color to a standard red:

path[name="past"].recharts-line-curve { stroke: red; }

[tommaso-moro]

Same! I'd love to use Tremor but branding is crucial so I can't use it without custom colors

[github-actions[bot]]

:tada: This issue has been resolved in version 3.12.0-beta.1 :tada:

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This issue has been resolved in version 3.12.0-beta-package-updates.1 :tada:

The release is available on:

• npm package (@beta-package-updates dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This issue has been resolved in version 3.12.0-beta-customcolors.1 :tada:

The release is available on:

• npm package (@beta-customcolors dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This issue has been resolved in version 3.12.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: