Theming

This is an example of design theming.

With Spirit Design System

If your project uses Spirit Design System, 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 does not use Spirit Design System, 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 */
    --lmcccm-font-family: 'Noto Sans', 'Roboto', 'Open Sans', system-ui, sans-serif;
    --lmcccm-base-font-size: 14px;
    --lmcccm-bg: rgb(255, 255, 255);
    --lmcccm-text: rgb(72, 72, 72);
    --lmcccm-backdrop-color: rgba(0, 0, 0, 0.5);

    /* Links */
    --lmcccm-link-text: var(--lmcccm-text);
    --lmcccm-link-hover-text: rgb(17, 17, 17);
    --lmcccm-link-active-text: var(--lmcccm-link-hover-text);

    /* Buttons */
    --lmcccm-btn-font-weight: 700;
    --lmcccm-btn-border-radius: 1.25em;
    --lmcccm-btn-primary-border: transparent;
    --lmcccm-btn-primary-bg: rgb(17, 17, 17);
    --lmcccm-btn-primary-text: rgb(255, 255, 255);
    --lmcccm-btn-primary-hover-border: transparent;
    --lmcccm-btn-primary-hover-bg: rgb(51, 51, 51);
    --lmcccm-btn-primary-hover-text: var(--lmcccm-btn-primary-text);
    --lmcccm-btn-primary-active-border: transparent;
    --lmcccm-btn-primary-active-bg: rgb(0, 0, 0);
    --lmcccm-btn-primary-active-text: var(--lmcccm-btn-primary-text);
    --lmcccm-btn-secondary-border: rgb(223, 223, 223);
    --lmcccm-btn-secondary-text: rgb(17, 17, 17);
    --lmcccm-btn-secondary-hover-border: rgb(146, 146, 146);
    --lmcccm-btn-secondary-hover-text: var(--lmcccm-btn-secondary-text);
    --lmcccm-btn-secondary-active-border: rgb(17, 17, 17);
    --lmcccm-btn-secondary-active-text: var(--lmcccm-btn-secondary-text);

    /* Toggle */
    --lmcccm-toggle-bg-off: rgb(146, 146, 146);
    --lmcccm-toggle-bg-on: rgb(0, 88, 163);

    /* Modal */
    --lmcccm-modal-border-radius: 1.4em;
    --lmcccm-modal-section-border: rgb(216, 216, 216);

    /* Cookies */
    --lmcccm-cookie-category-border-radius: 1.4em;
    --lmcccm-cookie-category-bg: rgb(245, 245, 245);
    --lmcccm-cookie-category-hover-bg: rgb(223, 223, 223);
}