-
-
Notifications
You must be signed in to change notification settings - Fork 82
Open
Labels
enhancementNew feature or requestNew feature or request
Description
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.
Metadata
Metadata
Assignees
Labels
enhancementNew feature or requestNew feature or request