Feature description
Update calendar styles with css variables.
Use case
It'll make easier to customize the component style using css variable (at least background-color and colors).
Proposed solution
Simply replace all static color value by a css variable. For example:
:root {
--vc-selected-date-background: #000;
--vc-selected-date-color: #fff;
}
[data-vc-theme=light] .vc-date[data-vc-date-selected] .vc-date__btn {
background-color: var(--vc-selected-date-background);
color: var(---vc-selected-date-color);
}
OR
[data-vc-theme=light] .vc-date[data-vc-date-selected] .vc-date__btn {
background-color: var(--vc-selected-date-background, rgb(6 182 212/var(--tw-bg-opacity)));
color: var(---vc-selected-date-color, #fff);
}
In this way, we can easily update the component style by updating the css variable.
Alternatives considered
I saw we can update classes, but we need to override the default style or recreate it completely. If we use css variables, we can simply update the value and it's done.
Feature description
Update calendar styles with css variables.
Use case
It'll make easier to customize the component style using css variable (at least background-color and colors).
Proposed solution
Simply replace all static color value by a css variable. For example:
OR
In this way, we can easily update the component style by updating the css variable.
Alternatives considered
I saw we can update classes, but we need to override the default style or recreate it completely. If we use css variables, we can simply update the value and it's done.