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#

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.