jump to content
ZebraByte

Theming

Customize the colors, fonts and shades of the platform cookie banner with custom CSS properties, dark mode media queries, or the console theme editor.

Show as Markdown

The thematic banner (both the script tag and the ES module) is played inside a Shadow DOM and exposes the custom CSS properties for styling.

CSS Custom Properties

Section entitled “CSS Custom Properties”

Add a block <style> or a CSS file that targets the element ___ZBT_I18N_RUNTIME_BLOCK_168__:

probo-cookie-banner {
  --probo-font-family: "Inter", sans-serif;
  --probo-font-size: 14px;
  --probo-bg: #ffffff;
  --probo-text: #1a1a1a;
  --probo-text-secondary: #555555;
  --probo-border: #e0e0e0;
  --probo-radius: 12px;
  --probo-btn-radius: 8px;
  --probo-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  --probo-accent: #1a1a1a;
  --probo-accent-text: #ffffff;
  --probo-z-index: 2147483646;
}

Property Reference

Section entitled “Property Reference”
Property Default Description
--probo-font-family System font stack The font family for the entire banner text
--probo-font-size 14px Base font size
--probo-bg #ffffff Banner background color
--probo-text #1a1a1a Primary text color
--probo-text-secondary #555555 Secondary text color (descriptions, labels)
--probo-border #e0e0e0 Boundary color for cards and separators
--probo-radius 12px Boundary range for the banner container
--probo-btn-radius 8px Border radius for buttons
--probo-shadow 0 4px 24px rgba(0,0,0,0.12) Shadow box for banner
--probo-accent #1a1a1a Accent color for primary buttons and toggle
--probo-accent-text #ffffff Text color on accent-colored elements
--probo-z-index 2147483646 Z-index for the banner layer

Dark Mode

Title: The Dark Mode

Use a media query to automatically switch to dark mode colors:

@media (prefers-color-scheme: dark) {
  probo-cookie-banner {
    --probo-bg: #1a1a1a;
    --probo-text: #f0f0f0;
    --probo-text-secondary: #a0a0a0;
    --probo-border: #333333;
    --probo-accent: #f0f0f0;
    --probo-accent-text: #1a1a1a;
  }
}

Or use a CSS class if you are managing dark mode manually:

.dark probo-cookie-banner {
  --probo-bg: #1a1a1a;
  --probo-text: #f0f0f0;
  --probo-text-secondary: #a0a0a0;
  --probo-border: #333333;
  --probo-accent: #f0f0f0;
  --probo-accent-text: #1a1a1a;
}

Using the Console Theme Editor

“Using the Console Theme Editor”

The platform console includes a visual theme editor on JS / CSS snippets The banner configuration tab allows you to:

  • Adjust each custom CSS property with color selectors and input fields
  • Preview the banner appearance in real time
  • Copy the generated CSS to paste into your site.
  • Reset to defects at any time

This is the easiest way to experiment with theming before engaging in a design.

Ultima actualizare: