app/assets/css/vue-date-picker.scss

// @see https://vue3datepicker.com/customization/theming/
// [!] Sass variables overriding does not work in scoped mode

.dp__theme_light, .dp__theme_dark {
  --dp-primary-color: rgb(var(--v-theme-primary)) !important;
  --dp-primary-text-color: rgb(var(--v-theme-on-primary)) !important;
  --dp-secondary-color: rgb(var(--v-theme-neutral-strong)) !important;
  --dp-success-color: rgb(var(--v-theme-success)) !important;
  --dp-success-color-disabled: rgb(var(--v-theme-neutral-strong)) !important;
}

.dp__theme_light {
  --dp-background-color: #ffffff;
  --dp-text-color: #212121;
  --dp-hover-color: #f3f3f3;
  --dp-hover-text-color: #212121;
  --dp-hover-icon-color: #959595;
  --dp-border-color: #ddd;
  --dp-menu-border-color: #ddd;
  --dp-border-color-hover: #aaaeb7;
  --dp-disabled-color: #f6f6f6;
  --dp-scroll-bar-background: #f3f3f3;
  --dp-scroll-bar-color: #959595;
  --dp-icon-color: #959595;
  --dp-danger-color: #ff6f60;
  --dp-highlight-color: rgba(25, 118, 210, 0.1);
}

.dp__theme_dark {
}

:root {
  --dp-action-button-height: 35px;
}