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

[dimitribarbot]

Using Tailwind CSS, I can customize my colors as described in the documentation.

I'd like to be able to create custom colors and apply them to the datepicker instead of being limited to the predefined ones. It seems to me that every color in the component is computed based on the primaryColor prop.

If I'm correct, this feature could be achieved by doing a few changes:

In /src/helpers/index.ts, getTextColorByPrimaryColor can be replaced with:

export function getTextColorByPrimaryColor(color: string) {
	return `text-${color}-500`;
}

In /src/components/utils.tsx, in the RoundedButton, instead of the switch on primaryColor, it can be:

return `${defaultClass} focus:ring-${primaryColor}-500/50 focus:bg-${primaryColor}-100/50`;

In /src/constants/index.ts, instead of the BG_COLOR, TEXT_COLOR, BORDER_COLOR and RING_COLOR constants, we can write helpers getBgColor, getTextColor, getBorderColor and getRingColor respectively:

export function getBgColor(color: string, shade: "100" | "200" | "500" | "hover") {
	return shade === "hover" ? `hover:bg-${color}-600` : `bg-${color}-${shade}`;
}

export function getTextColor(color: string, shade: "600" | "hover") {
	return shade === "hover" ? `hover:text-${color}-700` : `text-${color}-${shade} dark:text-${color}-400 dark:hover:text-${color}-400`;
}

export function getBorderColor(color: string, shade: "500" | "focus") {
	return shade === "focus" ? `focus:border-${color}-500` : `border-${color}-${shade}`;
}

export function getRingColor(color: string, shade: "focus" | "second-focus") {
	return shade === "focus" ? `focus:ring-${color}-500` : `focus:ring-${color}-500/20`;
}

This should do the trick without breaking compatibility with existing predefined colors. One must create custom colors for every shade though (it seems at least 100, 200, 400, 500, 600 and 700 are mandatory for the moment).

[JefteCaro]

Hi @dimitribarbot

Thank you for this suggestion.

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

[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]

Hi @JefteCaro and @onesine :wave:

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]

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.

[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. 🥳

[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.

[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.

[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.

[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: