search

Vuepic / vue-datepicker

Datepicker component for Vue 3
https://vue3datepicker.com
MIT License
1.48k stars 147 forks source link

--dp-background-color is only changing the input box and not the calandar menu. #730

Closed OV-Hank closed 8 months ago

OV-Hank commented 8 months ago

<Datepicker v-model="bidCompFromDate" :format="format" :dark="true"></Datepicker>

.dp__theme_dark { --dp-background-color: #13151d; --dp-text-color: #fff; --dp-hover-color: #484848; --dp-hover-text-color: #fff; --dp-hover-icon-color: #959595; --dp-primary-color: #06b6d4; --dp-primary-disabled-color: #06b6d4; --dp-primary-text-color: #fff; --dp-secondary-color: #a9a9a9; --dp-border-color: #13151d; --dp-menu-border-color: #13151d; --dp-border-color-hover: #aaaeb7; --dp-disabled-color: #737373; --dp-disabled-color-text: #d0d0d0; --dp-scroll-bar-background: #13151d; --dp-scroll-bar-color: #484848; --dp-success-color: #06b6d4; --dp-success-color-disabled: #06b6d4; --dp-icon-color: #959595; --dp-danger-color: #e53935; --dp-marker-color: #e53935; --dp-tooltip-color: #13151d; --dp-highlight-color: #06b6d4; --dp-range-between-dates-background-color: var(--dp-hover-color, #484848); --dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff); --dp-range-between-border-color: var(--dp-hover-color, #fff); }

image

Not sure what I am doing wrong, if i look in the elements the calendar menu bg color is from --dp-background-color but it's not using my updated colors to match my theme.

Jasenkoo commented 8 months ago

@OV-Hank Looks like it works as expected here. Make sure that you don't have some global style overriding the theme one.

OV-Hank commented 8 months ago

Ah i see, i was using a scoped style tag. Thank you for taking the time to check.