Mørkt tema uten blink: en bryter som husker valget

Du har slått på et mørkt tema, og ved hver ny innlasting blinker siden hvitt et brøkdels sekund før den blir mørk. Dette er den vanligste feilen i en temabryter, og den rettes med ett lite skript på riktig sted. Nedenfor finner du hele oppskriften: kode du kan kopiere, en forklaring på hvordan den virker, og en måte å sjekke resultatet selv på.

Dette får du #

• Som standard følger temaet systemets tema (lyst eller mørkt) og virker selv med JavaScript slått av.
• En knapp bytter tema, og valget huskes i nettleseren.
• Det lagrede valget tas i bruk før første opptegning: ingen hvit blink ved ny innlasting.

Hvorfor siden blinker #

Trinn 1. Fortell at nettstedet har begge temaene #

<meta name="color-scheme" content="light dark">
<script>
(function () {
  var saved = null;
  try { saved = localStorage.getItem('theme'); } catch (e) {}
  if (saved === 'light' || saved === 'dark') {
    document.documentElement.dataset.theme = saved;
  }
})();
</script>

Trinn 2. Beskriv fargene én gang #

:root {
  color-scheme: light dark;
  --bg: light-dark(#ffffff, #14161a);
  --text: light-dark(#1b1f24, #e6e8eb);
  --card: light-dark(#f3f5f8, #1e2228);
  --line: light-dark(#d8dee6, #2c333c);
  --accent: light-dark(#1a56db, #7aa7ff);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { background: var(--bg); color: var(--text); }

Trinn 3. Legg til en knapp #

<button id="theme-toggle" type="button" aria-pressed="false"></button>

(function () {
  var root = document.documentElement;
  var button = document.getElementById('theme-toggle');
  var names = { dark: 'Dark', light: 'Light' };

  function current() {
    return root.dataset.theme ||
      (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
  }
  function show() {
    var now = current();
    button.textContent = names[now];
    button.setAttribute('aria-pressed', now === 'dark');
  }

  button.addEventListener('click', function () {
    var next = current() === 'dark' ? 'light' : 'dark';
    root.dataset.theme = next;
    try { localStorage.setItem('theme', next); } catch (e) {}
    show();
  });
  show();
})();

Sjekk det selv #

Resten er også sjekket: uten JavaScript tar siden systemets tema, etter et trykk på knappen og ny innlasting blir valget stående, og ved 390, 768 og 1280 punkter er det ingen vannrett rulling.
Du kan gjenta det slik:

1. Åpne siden, trykk på knappen og velg det mørke temaet.
2. Slå på nettverksstruping i utviklerverktøyene og last inn siden på nytt: bakgrunnen er mørk fra første bilde.
3. Slå av JavaScript og tøm lagringen: siden følger systemets tema igjen.

Vanlige feil #

• Skriptet nederst på siden. Blinken kommer tilbake: valget blir kjent for sent.
• Ingen color-scheme på :root. Uten den vet ikke light-dark() hvilken verdi den skal ta.
• Ingen try rundt localStorage. I privat modus går siden i stykker i enkelte nettlesere.
• Temaet bare i JavaScript. Uten skriptet får den besøkende ikke noe mørkt tema, selv om det er slått på i systemet. Oppskriften løser dette med color-scheme.
• Kontrasten er ikke sjekket. Tekst og bakgrunn bør gi minst 4,5 til 1, tilgjengelighetskravet WCAG AA. Sjekk begge temaene, ikke bare ett.