Theming

This is an example of design theming.

With Spirit Design System

If your project uses Spirit Design System version 3 or higher, theming is done automatically. Just follow the steps in README to compile Cookie Consent Manager styles with Spirit and you are done.

Without Spirit Design System

If your project uses Spirit Design System version 2 or lower, or it does not use Spirit Design System at all, you can still manually customize the appearance of the Cookie Consent Manager UI. Head over to README to get the full list of available CSS custom properties.

Apply custom theme

Show source

:root {
    /* Common */
    --cc-font-family: 'Noto Sans', 'Roboto', 'Open Sans', system-ui, sans-serif;
    --cc-bg: rgb(255, 255, 255);
    --cc-primary-color: rgb(72, 72, 72);

    /* Links */
    --cc-link-color: var(--cc-primary-color);

    /* Buttons */
    --cc-btn-border-radius: 0.5em;
    --cc-btn-primary-bg: rgb(17, 17, 17);
    --cc-btn-primary-color: rgb(255, 255, 255);
    --cc-btn-primary-border-color: transparent;
    --cc-btn-primary-hover-bg: rgb(51, 51, 51);
    --cc-btn-primary-hover-color: var(--cc-btn-primary-color);
    --cc-btn-primary-hover-border-color: transparent;
    --cc-btn-secondary-bg: transparent;
    --cc-btn-secondary-color: rgb(17, 17, 17);
    --cc-btn-secondary-border-color: rgb(223, 223, 223);
    --cc-btn-secondary-hover-bg: transparent;
    --cc-btn-secondary-hover-color: var(--cc-btn-secondary-color);
    --cc-btn-secondary-hover-border-color: rgb(146, 146, 146);

    /* Toggles */
    --cc-toggle-on-bg: rgb(0, 88, 163);
    --cc-toggle-off-bg: rgb(146, 146, 146);
    --cc-toggle-on-knob-bg: rgb(255, 255, 255);
    --cc-toggle-off-knob-bg: rgb(255, 255, 255);

    /* Cookie categories */
    --cc-cookie-category-block-bg: rgb(245, 245, 245);
    --cc-cookie-category-block-hover-bg: rgb(223, 223, 223);

    /* Separators */
    --cc-separator-border-color: rgb(216, 216, 216);

    /* Backdrop */
    --cc-overlay-bg: rgba(0, 0, 0, 0.5);

    /* Modal */
    --cc-modal-border-radius: 1.4em;
}