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
Info
⚠️ The colors are clickable. So you can click on one of them to try the corresponding theme. This will change the theme of the date pickers on this page.
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.
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";
const App = () => {
const [value, setValue] = useState({
startDate: new Date(),
endDate: new Date().setMonth(11)
});
const handleValueChange = (newValue) => {console.log("newValue:", newValue);
setValue(newValue);
}
return (<Datepicker
primaryColor={"fuchsia"}
value={value}
onChange={handleValueChange}
showShortcuts={true}
/>
);};
export default App;
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.