Teemat ja tumma tila

Ylikirjoita nämä 7 CSS-muuttujaa missä tahansa bannerin yläpuolella DOMissa (esim. :root-valitsimessa):

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

Ne kattavat värit, kulmien pyöristyksen ja fontin. Asettelua (sijainti, sisävälit, bannerin leveys, painikkeiden koko) ei tarkoituksella ole tarjottu muuttujina – jos haluat mennä pidemmälle, kohdista omassa globaalissa CSS:ssäsi valitsimiin .cc-banner, .cc-header, .cc-title, .cc-actions, .cc-accept, .cc-decline, .cc-category, .cc-switch tai .cc-reopen. Astron scoped-tyyliattribuutti komponentin omissa säännöissä voi voittaa tavallisen ulkoisen ylikirjoituksen spesifisyydessä, joten saatat tarvita !important-määreen tai yhtä spesifisen valitsimen.

Etkö tiedä, millä arvoilla aloittaa? Esimerkkiteemoista löydät kourallisen valmiita esiasetuksia, joita voit esikatsella livenä ja kopioida.

Vaalea/tumma tila

Jos et itse aseta --cc-bg/--cc-fg/--cc-border-muuttujia, banneri seuraa jo automaattisesti kävijän käyttöjärjestelmän väriteemaa – oletuksena tumma ja prefers-color-scheme: light -asetuksella vaalea.

Jos haluat pakottaa yhden teeman käyttöjärjestelmän asetuksesta riippumatta – esimerkiksi koska sivustollasi on oma vaalea/tumma-kytkin –, aseta <html>-elementille data-theme="light" tai data-theme="dark":

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

Jos asetat itse minkä tahansa yllä olevista 7 muuttujasta, se menee aina sekä käyttöjärjestelmän asetuksen että data-theme-attribuutin edelle kaikissa teemoissa.