Theming options#

React Tailwindcss Datepicker uses the Tailwindcss colors to propose several themes. You can change the theme of your datepicker from a props. React Tailwindcss Datepicker also supports dark mode.

Tailwind colors supported#

Fuchsia Example#

To do this you just need to add the props primaryColor to your date picker and specify a string that represents the color.

1import { useState } from "react"; 
2import Datepicker from "react-tailwindcss-datepicker"; 
3
4const NEXT_MONTH = new Date();
5NEXT_MONTH.setMonth(NEXT_MONTH.getMonth() + 1);
6
7const App = () => { 
8    const [value, setValue] = useState({ 
9        startDate: new Date(), 
10        endDate: NEXT_MONTH
11    });
12
13    return (
14        <Datepicker
15            primaryColor={"fuchsia"}
16            value={value} 
17            onChange={newValue => setValue(newValue)}
18            showShortcuts={true}
19        /> 
20    );
21};
22
23export default App;
24

Light mode#

The light mode is the default style used by react-tailwindcss-datepicker with a primaryColor of blue.

Dark mode#

The dark mode uses the dark variant of tailwind to provide a dark theme that should fit your project.

Use this theme toggle to try the dark mode on the react-tailwindcss-datepicker below.