UI Customization

This section provides guidance on how to customize the user interface (UI) of the Kalapa CMP SDK, including options for modifying the layout, colors, and other visual aspects.

Customizing the UI

You can customize both the color scheme and layout based on your needs.

guiOptions

This allows you to adjust the layout/position of modals and buttons. See the configuration section for all available options.

Note: Each modal has a different set of available layouts and positions, and one layout may have multiple variations.

Default Configuration:

guiOptions: {
    consentModal: {
        layout: 'box',
        position: 'bottom right',
    },
    preferencesModal: {
        layout: 'box',
        position: 'left',
    }
}

---

Color Scheme

The SDK provides both light (default) and dark themes.

You can enable the dark theme by adding the class cc--darkmode to the html element. You can also toggle the dark mode via JavaScript:

document.documentElement.classList.add("cc--darkmode");

---

Available CSS Variables

You can create your own theme by modifying or overriding the CSS variables.

:root {
  --cc-bg: #ffffff;
  --cc-primary-color: #2c2f31;
  --cc-secondary-color: #5e6266;

  --cc-btn-primary-bg: #30363c;
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border-color: var(--cc-btn-primary-bg);
  --cc-btn-primary-hover-bg: #000000;
  --cc-btn-primary-hover-color: #ffffff;
  --cc-btn-primary-hover-border-color: var(--cc-btn-primary-hover-bg);

  --cc-btn-secondary-bg: #eaeff2;
  --cc-btn-secondary-color: var(--cc-primary-color);
  --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg);
  --cc-btn-secondary-hover-bg: #d4dae0;
  --cc-btn-secondary-hover-color: #000000;
  --cc-btn-secondary-hover-border-color: #d4dae0;

  --cc-separator-border-color: #f0f4f7;

  --cc-toggle-on-bg: var(--cc-btn-primary-bg);
  --cc-toggle-off-bg: #667481;
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg);

  --cc-toggle-enabled-icon-color: var(--cc-bg); // yes (v tick)
  --cc-toggle-disabled-icon-color: var(--cc-bg); // no (x tick)

  --cc-toggle-readonly-bg: #d5dee2;
  --cc-toggle-readonly-knob-bg: #fff;
  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg);

  --cc-section-category-border: var(--cc-cookie-category-block-bg);

  --cc-cookie-category-block-bg: #f0f4f7;
  --cc-cookie-category-block-border: #f0f4f7;
  --cc-cookie-category-block-hover-bg: #e9eff4;
  --cc-cookie-category-block-hover-border: #e9eff4;
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: #dee4e9;

  --cc-overlay-bg: rgba(0, 0, 0, 0.65);
  --cc-webkit-scrollbar-bg: var(--cc-section-category-border);
  --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg);

  --cc-footer-bg: var(--cc-btn-secondary-bg);
  --cc-footer-color: var(--cc-secondary-color);
  --cc-footer-border-color: #e4eaed;
}

Additional CSS variables:

#cc-main {
  --cc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --cc-modal-border-radius: 0.5rem;
  --cc-btn-border-radius: 0.4rem;
  --cc-modal-transition-duration: 0.25s;
  --cc-modal-margin: 1rem;
  --cc-z-index: 2147483647;
}

---

Disabling Transitions

You can disable all transitions simply by setting the transition time to 0:

#cc-main,
#cc-main .cm,
#cc-main .pm {
  --cc-modal-transition-duration: 0;
}

---

How to Modify CSS Variables:

1. Create a new .css file (or declare the styles directly within a <style> tag).
2. Override the existing CSS variables:

#cc-main {
  /** Change font **/
  --cc-font-family: Roboto;

  /** Change the primary button color to black **/
  --cc-btn-primary-bg: #000000;
  --cc-btn-primary-border-color: #000000;
  --cc-btn-primary-hover-bg: #444444;
  --cc-btn-primary-hover-border-color: #444444;

  /** Make toggle buttons the same color as the primary button **/
  --cc-toggle-on-bg: var(--cc-btn-primary-bg);

  /** Make the buttons rounder **/
  --cc-btn-border-radius: 10px;
}