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