Theming & Dark Mode

Überschreibe diese 7 CSS Custom Properties irgendwo oberhalb des Banners im DOM (z. B. auf :root):

:root {
  --cc-bg: #1f1f1f;
  --cc-fg: #f5f5f5;
  --cc-accent: #4f46e5;
  --cc-accent-fg: #fff;
  --cc-border: rgba(255, 255, 255, 0.15);
  --cc-radius: 14px;
  --cc-font: system-ui, sans-serif;
}

Sie decken Farben, Radius und Schrift ab. Das Layout (Position, Innenabstand, Bannerbreite, Buttongröße) ist bewusst nicht als Variablen verfügbar – wenn du weiter gehen willst, sprich in deinem eigenen globalen CSS .cc-banner, .cc-header, .cc-title, .cc-actions, .cc-accept, .cc-decline, .cc-category, .cc-switch oder .cc-reopen an. Astros Scoped-Style-Attribut an den eigenen Regeln der Komponente kann eine einfache externe Überschreibung in der Spezifität schlagen, daher brauchst du eventuell !important oder einen gleich spezifischen Selektor.

Du weißt nicht, mit welchen Werten du anfangen sollst? Unter Beispiel-Themes findest du eine Handvoll fertiger Vorlagen, die du live ansehen und kopieren kannst.

Hell- und Dunkelmodus

Wenn du --cc-bg/--cc-fg/--cc-border nicht selbst setzt, folgt das Banner bereits automatisch dem Farbschema des Betriebssystems – standardmäßig dunkel, bei prefers-color-scheme: light hell.

Um unabhängig von der Systemeinstellung ein Theme zu erzwingen – etwa weil deine Website einen eigenen Hell/Dunkel-Schalter hat –, setze data-theme="light" oder data-theme="dark" auf <html>:

document.documentElement.dataset.theme = 'light'; // or 'dark'

Wenn du eine der 7 Variablen oben selbst setzt, hat das in jedem Theme immer Vorrang vor der Systemeinstellung und dem data-theme-Attribut.