Temas y modo oscuro

Sobrescribe estas 7 propiedades CSS personalizadas en cualquier punto por encima del banner en el DOM (por ejemplo, en :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;
}

Cubren el color, el radio y la tipografía. La maquetación (posición, márgenes internos, ancho del banner, tamaño de los botones) no se expone como variables a propósito: si necesitas ir más allá, apunta a .cc-banner, .cc-header, .cc-title, .cc-actions, .cc-accept, .cc-decline, .cc-category, .cc-switch o .cc-reopen desde tu propio CSS global. El atributo de estilos con ámbito de Astro en las reglas del componente puede superar en especificidad a una sobrescritura externa simple, así que quizá necesites !important o un selector igual de específico.

¿No sabes qué valores usar? Consulta los temas de ejemplo: unos cuantos preajustes listos que puedes previsualizar en vivo y copiar.

Modo claro/oscuro

Si no defines tú mismo --cc-bg/--cc-fg/--cc-border, el banner ya sigue automáticamente el esquema de color del sistema del visitante: oscuro por defecto y claro con prefers-color-scheme: light.

Para forzar un tema independientemente de la preferencia del sistema (por ejemplo, porque tu sitio tiene su propio selector claro/oscuro), define data-theme="light" o data-theme="dark" en <html>:

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

Definir tú mismo cualquiera de las 7 variables anteriores siempre tiene prioridad sobre la preferencia del sistema y el atributo data-theme, en cualquier tema.