Style

You can easily customize your datedropper style by using and changing CSS variables.

How it works

You can copy and paste the code below with the CSS variables directly on your CSS stylesheet or by creating a new one and link it to the <head> of your website.

:root {
  --dd-color1: #fd4741;
  --dd-color2: white;
  --dd-color3: #4D4D4D;
  --dd-color4: white;
  --dd-radius: 6px;
  --dd-width: 180px;
  --dd-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.1);
}

As you can see, CSS variables are refering to the main root so they will be apply globally. Of course, you can singularly change each datepicker style by using the javascript option "theme" as shown below.

$('.picker-input-1').dateDropper({
  theme: 'picker1'
});
$('.picker-input-2').dateDropper({
  theme: 'picker2'
});

This way you will be able to change style properties by adding new classes with the customized variables. For example, if you only want to change primary color of each single datepicker, you can do it this way:

.picker1 {
  --dd-color1: red;
}
.picker2 {
  --dd-color1: green;
}

So now datepickers will change only primary color and will continue to use the root ones as default colors.

Style options

These are all the style options available

Variable	Default
--dd-color1	#fd4741
--dd-color2	#FFFFFF
--dd-color3	#4D4D4D
--dd-color4	#FFFFFF
--dd-radius	6px
--dd-width	180px
--dd-shadow	0 0 32px 0 rgba(0, 0, 0, 0.1)