Skip to content

[FEATURE] - Update css style with css variables #389

@michaelvalenti

Description

@michaelvalenti

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

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions