← Retour

06 — Variables CSS & Thèmes

Démo

Titre de la carte

Ce composant utilise uniquement des variables CSS. Changer le thème modifie toutes les couleurs d'un coup.

Action

Variables — Thème clair (défaut)

:root {
  --color-bg:      #ffffff;
  --color-surface: #f5f5f5;
  --color-text:    #111111;
  --color-accent:  #2d7a2d;
  --color-border:  #dddddd;
}

Thème sombre — préférence système

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:      #111111;
    --color-surface: #1e1e1e;
    --color-text:    #eeeeee;
    --color-accent:  #5dba5d;
    --color-border:  #333333;
  }
}

Thème sombre — classe manuelle

[data-theme="dark"] {
  --color-bg:      #111111;
  --color-surface: #1e1e1e;
  --color-text:    #eeeeee;
  --color-accent:  #5dba5d;
  --color-border:  #333333;
}

Usage dans les composants

body            { background: var(--color-bg);  color: var(--color-text); }
.demo-card      { background: var(--color-surface); border: 1px solid var(--color-border); }
.btn            { background: var(--color-accent); }