[Feature Request] Use custom colors instead of being limited to predefined ones

[onesine]

[Feature Request] Use custom colors instead of being limited to predefined ones

[dimitribarbot]

Hi @JefteCaro and @onesine 👋

Thank you for your quick answers !

Indeed, you're totally right, I did not see this part of the Tailwind documentation: Dynamic Class Names. This seems to be a Tailwind limitation.

Then, I propose to add primary and secondary as available colors. These are common conventions in naming colors while theming. It will allow anyone to use their own color by adding configuration in the tailwind.config.js file.

What do you think ? If you agree, I can push a PR, I tested it in the playground and it's working like a charm.

[onesine]

Hi @FelixZY 👋

Thanks for your feedback.

We are still looking for a solution to this issue. Thanks for the suggestion. We will take it into account.

[5war00p]

The quick and temporary solution is we can override the existing color names with our brand color in tailwind.config.js like below:

and here is the output:

[onesine]

Hi @dimitribarbot 👋

Thank you very much for your feedback and for this proposal.

Initially, I did not want to offer a set of predefined styles to limit our users. I wanted to allow people to create their own custom styles. But, I quickly ran into a problem.
When you use the following code.

import React from 'react';

const App = ({color}) => {
  return (
    <div className='App'>
      <h1 className={`text-3xl font-bold text-${color}-500`}>Hello React.</h1>
    </div>
  );
}

export default App;

We notice that Tailwindcss does not generate CSS styles for utility classes that have portions as parameters. If the color of the props was blue, we should have the class . text-blue-500 in the CSS file generated by tailwind. But, we don't find it.

It is thus in spite of me that I provided predefined styles while waiting to propose something else.

If you have a solution you can propose it to us.
PRs are welcome.

[dimitribarbot]

I've pushed a PR here.

Also, I'd like to really thank you for your work on this component, this will help me a lot. And I will look at your select component as well, it may fits my needs. 🥳

[JefteCaro]

Hi @dimitribarbot

Thank you for this suggestion.

PRs are welcome. You can test your implementation using the playground.

[onesine]

On the contrary, we thank you for it. And thank you for the ideas you have to improve the datepicker.

I think this is a great idea. Offering a primary and secondary color adds more customization possibilities. I agree with you and PRs are always welcome.

[onesine]

Thanks for the PR, I'll take a quick look at it.

I'm glad the component is helping you.

[FelixZY]

Not being able to use custom colors is currently a large downside for us - potentially enough for us to choose another lib. We're using DaisyUI with custom colors and cannot style the component.

Regarding dynamic class names: I think it would be better to expose something like

<Datepicker
  theme={{
    text: "text-custom-color1",
    header: "bg-custom-color2",
    outline: "bg-custom-color3",
  }}

than not at all.

[FelixZY]

https://github.com/OMikkel/tailwind-datepicker-react implements my suggested solution above.

[cayblood]

I see that PR #40 seems to have added support for custom colors, but I see no explanation of how to use this in the documentation. Can someone please explain?

[BernardKintzing]

Would it be possible to use a classFilter to allow the user to override any of the default styling? I use a classFilter for all my components to allow customizations for specific use cases.

Create the util class with twMerge

import { ClassNameValue, twMerge } from "tailwind-merge";

export function classFilter(...classes: ClassNameValue[]) {
  return twMerge(classes.filter(Boolean).join(" "));
}

Implement in component

import React from 'react';
import { classFilter } from 'util';

const App = ({ className }) => {
  return (
    <div className='App'>
      <h1 className={classFilter('text-3xl font-bold text-indigo-500', className)}>Hello React.</h1>
    </div>
  );
}

export default App;

Override class in consumer files

<App className={"font-light text-xl"} />

[5war00p]

Although as this is a tailwind component it makes sense to have support only tailwind supported colors and as users need more customization. My idea would be instead of defining colors like this:

export declare const COLORS: readonly ["blue", "orange", "yellow", "red", "purple", "amber", "lime", "green", "emerald", "teal", "cyan", "sky", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];

we can use

require('tailwindcss/colors')

or

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from 'path/to/your/tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

to get all the user defined colors from the tailwind.config.js.

One other thing is simply taking any string (even if its a gradient) and apply to the calendar.