Bouton clair / sombre

LES COULEURS EN VARIABLES

Un seul jeu de règles, deux jeux de couleurs.

:root { --fond: #ede8df; --texte: #09090e; }
:root[data-theme="sombre"] { --fond: #09090e; --texte: #ede8df; }
body { background: var(--fond); color: var(--texte); }

LES TROIS BOUTONS

<div role="group" aria-label="Thème">
  <button data-t="clair">Clair</button>
  <button data-t="sombre">Sombre</button>
  <button data-t="systeme">Système</button>
</div>

LE RÉGLAGE DU SYSTÈME

matchMedia lit la préférence, et prévient quand elle change.

const systeme = matchMedia('(prefers-color-scheme: dark)');

APPLIQUER

Le choix enregistré gagne. Sans choix, on suit le système.

function appliquer() {
  const choix = localStorage.getItem('theme') || 'systeme';
  const theme = choix === 'systeme' ? (systeme.matches ? 'sombre' : 'clair') : choix;
  document.documentElement.dataset.theme = theme;
  document.querySelectorAll('[data-t]').forEach(b =>
    b.setAttribute('aria-pressed', String(b.dataset.t === choix)));
}

LES ÉCOUTEURS

document.querySelectorAll('[data-t]').forEach(b =>
  b.addEventListener('click', () => {
    localStorage.setItem('theme', b.dataset.t);
    appliquer();
  }));
systeme.addEventListener('change', appliquer);
appliquer();