Theming options

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

Tailwind colors supported

blue
orange
yellow
red
purple
amber
lime
green
emerald
teal
cyan
sky
indigo
violet
purple
fuchsia
pink
rose

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-advance-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-advance-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-advance-datepicker below.