Teman och mörkt läge

Skriv över dessa 7 anpassade CSS-egenskaper var som helst ovanför bannern i DOM:en (t.ex. på :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;
}

De täcker färg, hörnradie och typsnitt. Layout (position, utfyllnad, bannerbredd, knappstorlek) är medvetet inte exponerad som variabler – rikta in dig på .cc-banner, .cc-header, .cc-title, .cc-actions, .cc-accept, .cc-decline, .cc-category, .cc-switch eller .cc-reopen från din egen globala CSS om du vill gå längre. Astros scoped-stilattribut på komponentens egna regler kan vinna över en enkel extern överskrivning i specificitet, så du kan behöva !important eller en lika specifik selektor.

Vet du inte vilka värden du ska börja med? Se Exempelteman för en handfull färdiga förinställningar som du kan förhandsgranska live och kopiera.

Ljust/mörkt läge

Om du inte själv sätter --cc-bg/--cc-fg/--cc-border följer bannern redan automatiskt besökarens färgschema i operativsystemet – mörkt som standard och ljust vid prefers-color-scheme: light.

För att tvinga fram ett tema oavsett systeminställning – t.ex. om din webbplats har en egen växlare för ljust/mörkt – sätter du data-theme="light" eller data-theme="dark" på <html>:

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

Om du själv sätter någon av de 7 variablerna ovan har det alltid företräde framför både systeminställningen och data-theme-attributet, i alla teman.