Tuỳ chỉnh UI

Bạn có thể tùy chỉnh cả bảng màu và bố cục dựa trên nhu cầu của mình.

guiOptions

Cho phép bạn điều chỉnh bố cục/vị trí của modal và nút bấm. Xem phần cấu hình để biết tất cả các tùy chọn có sẵn.

INFO

Mỗi modal có một tập hợp bố cục và vị trí khả dụng khác nhau. Một bố cục cũng có thể có một hoặc nhiều biến thể.

Cấu hình mặc định:

javascript

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

Bảng màu

SDK cung cấp cả hai chủ đề sáng (mặc định) và tối.

Chủ đề tối có thể được kích hoạt bằng cách thêm class cc--darkmode vào phần tử html. Bạn cũng có thể sử dụng javascript để bật/tắt chế độ tối:

javascript

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

Các biến CSS có sẵn

Bạn có thể phát triển chủ đề của riêng mình bằng cách sửa đổi/ghi đè các biến CSS:

css

: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;
}

Các biến CSS bổ sung:

css

#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;
}

Vô hiệu hóa chuyển đổi

Bạn có thể vô hiệu hóa tất cả các chuyển đổi đơn giản bằng cách đặt thời gian chuyển đổi thành 0:

css

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

Cách thay đổi các biến CSS:

Tạo một file .css mới (hoặc khai báo kiểu trực tiếp bằng thẻ <style>)

Ghi đè các biến CSS hiện có

css

#cc-main {
  /** Thay đổi font **/
  --cc-font-family: Roboto;

  /** Thay đổi màu chính của nút thành màu đen **/
  --cc-btn-primary-bg: #000000;
  --cc-btn-primary-border-color: #000000;
  --cc-btn-primary-hover-bg: #444444;
  --cc-btn-primary-hover-border-color: #444444;

  /** Cũng làm cho nút bật tắt cùng màu với nút **/
  --cc-toggle-on-bg: var(--cc-btn-primary-bg);

  /** Làm cho các nút bo tròn hơn một chút **/
  --cc-btn-border-radius: 10px;
}

Tuỳ chỉnh UI ​

guiOptions ​

Bảng màu ​

Các biến CSS có sẵn ​