Choose styles and color palettes for your date picker
datedropper comes with three different themes which will allow you to customize its style and color palette.
Specifically, in addition to the default theme, you will be able to activate the following extra themes.
Vanilla theme preview
Leaf theme preview
Create your own theme PRO
Use the Theme Generator to create your unique combination of styles and color palettes for your date pickers.
The Theme Generator allows you to customize the following features of your date picker:
- Color palette
- Border radius
- Box shadow
- Font style
Keep in mind that the Theme Generator is only available with the Pro version of datedropper.
Set a datedropper theme
Like for all the other datedropper options, themes can be set in two ways:
- using a data attribute;
Set a theme by using a data attribute
In order to set a theme by using a data attribute, add and customize the data-dd-theme attribute on the element on which datedropper has to be executed.
For instance, you can enable the leaf theme by simply customizing the selector as follows:
<input type="date" data-dd-theme="leaf">
You can also set your theme during the initialization by customizing the theme variable of the .dateDropper() function.
For instance, you could activate a custom theme called my-theme as follows: