Theming

Bannerul tematic (atât eticheta script, cât și modulul ES) se redă în interiorul unui Shadow DOM și expune proprietățile personalizate CSS pentru styling.

CSS Custom Properties

Add a <style> Bloc sau fișier CSS care vizează probo-cookie-banner element:

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

Property	Default	Description
--probo-font-family	System font stack	Familia fonturilor pentru tot textul de banner
--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	Culoare de graniță pentru carduri și separatoare
--probo-radius	12px	Raza de graniță pentru containerul de bannere
--probo-btn-radius	8px	Border radius for buttons
--probo-shadow	0 4px 24px rgba(0,0,0,0.12)	Cutie de umbră pentru banner
--probo-accent	#1a1a1a	Culoare de accent pentru butoane și toggle primare
--probo-accent-text	#ffffff	Text color on accent-colored elements
--probo-z-index	2147483646	Z-index pentru stratul de banner

Dark Mode

Utilizați o interogare media pentru a trece automat la culorile modului întunecat:

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

Sau utilizați o clasă CSS dacă gestionați manual modul întunecat:

.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

Consola de platformă include un editor de teme vizuale pe JS / CSS snippets fila de configurare a banner-ului dvs. Vă permite:

• Ajustați fiecare proprietate personalizată CSS cu selectoare de culori și câmpuri de intrare
• Preview the banner appearance in real time
• Copiați CSS-ul generat pentru a lipi în site-ul dvs.
• Resetarea la defecte în orice moment

Aceasta este cea mai ușoară modalitate de a experimenta cu tematizarea înainte de a vă angaja într-un design.