Support for color prop on DatePicker

[mattdenkers]

Hi there! First of all, amazing work on Mantine, it's a fantastic library. Everything below is related to version 7.12 btw.

I have a use case where it would be great to have separately themed DatePickers. The default behavior is for selected days to be the theme's primary color, and for days in the range to be a variant of that primary color, etc.

Similar to other Mantine components where it's possible to specify color, i.e. <Button color="green">Green button</Button>, my use case would be simplified by being able to specify <DatePicker color="green"> for example.

Here's an example of my current CSS workaround, where the primary theme color is a shade of purple, and this CSS ensures the datepicker uses custom shades of blue instead:

.blue-datepicker {
    .mantine-DatePicker-day {
        /* Order is important with these */
        &[data-selected] {
            background-color: var(--mantine-color-dvm-blue-filled);
            color: white;
        }

        &[data-in-range] {
            background-color: color-mix(
                in srgb,
                var(--mantine-color-dvm-blue-filled) 20%,
                transparent
            );
            color: black;
        }

        &[data-weekend] {
            color: red;
        }

        &[data-first-in-range] {
            background-color: var(--mantine-color-dvm-blue-filled);
            color: white;
            opacity: 1;
        }

        &[data-last-in-range] {
            background-color: var(--mantine-color-dvm-blue-filled);
            color: white;
            opacity: 1;
        }
    }
}

I hope this request makes sense! It's also possible I'm missing something in the docs and there's a simpler workaround - if that's the case, please let me know.

Thank you!

[rtivital]

What is wrong with applying these styles with css? You've said that this method worked for you and it is less than 20 lines of code.

[mattdenkers]

Thanks for the quick reply!

There's certainly nothing wrong with using CSS. That being said, I still think adding color= support to DatePicker is a valid request that would improve DX and consistency.

For example, our codebase currently uses the color prop to easily style Button, Loader, ActionIcon, Radio, Checkbox, Badge, Blockquote, and Alert components. Given that, it's a bit surprising and unintuitive that TypeScript suggests DatePicker accepts a color prop currently, but no styling is applied, and custom CSS is required.