Thèmes et mode sombre

Surchargez ces 7 propriétés CSS personnalisées n’importe où au-dessus de la bannière dans le DOM (par exemple sur :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;
}

Elles couvrent la couleur, le rayon et la police. La mise en page (position, marges internes, largeur de la bannière, taille des boutons) n’est volontairement pas exposée en variables – ciblez .cc-banner, .cc-header, .cc-title, .cc-actions, .cc-accept, .cc-decline, .cc-category, .cc-switch ou .cc-reopen depuis votre propre CSS global si vous voulez aller plus loin. L’attribut de style scopé d’Astro sur les règles du composant peut l’emporter en spécificité sur une simple surcharge externe ; vous aurez donc peut-être besoin de !important ou d’un sélecteur aussi spécifique.

Vous ne savez pas par où commencer ? Consultez les thèmes d’exemple : quelques préréglages prêts à l’emploi que vous pouvez prévisualiser en direct et copier.

Mode clair/sombre

Si vous ne définissez pas vous-même --cc-bg/--cc-fg/--cc-border, la bannière suit déjà automatiquement le jeu de couleurs du système du visiteur – sombre par défaut, clair sous prefers-color-scheme: light.

Pour forcer un thème quelle que soit la préférence du système – par exemple si votre site a son propre sélecteur clair/sombre –, définissez data-theme="light" ou data-theme="dark" sur <html> :

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

Définir vous-même l’une des 7 variables ci-dessus a toujours la priorité sur la préférence du système et sur l’attribut data-theme, quel que soit le thème.