Mörkt tema utan blinkning: en temaväxlare som minns valet

Du har slagit på ett mörkt tema, och vid varje omladdning blinkar sidan vit en bråkdels sekund innan den blir mörk. Det är det vanligaste felet i en temaväxlare, och det åtgärdas med ett litet skript på rätt ställe. Nedan finns hela receptet: kod du kan kopiera, en förklaring av hur den fungerar och ett sätt att själv kontrollera resultatet.

Det här får du #

• Som standard följer temat systemets tema (ljust eller mörkt) och fungerar även med JavaScript avstängt.
• En knapp växlar tema, och valet sparas i webbläsaren.
• Det sparade valet tillämpas före den första målningen: ingen vit blinkning vid omladdning.

Varför sidan blinkar #

Steg 1. Ange att webbplatsen har båda temana #

<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>

Steg 2. Beskriv färgerna en gång #

: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); }

Steg 3. Lägg till 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();
})();

Kontrollera själv #

Resten är också kontrollerat: utan JavaScript följer sidan systemets tema, efter ett tryck på knappen och en omladdning finns valet kvar, och vid 390, 768 och 1280 punkter finns ingen horisontell rullning.
Du kan upprepa testet så här:

1. Öppna sidan, tryck på knappen och välj det mörka temat.
2. Slå på nätverksstrypning i utvecklarverktygen och ladda om sidan: bakgrunden är mörk från första bildrutan.
3. Stäng av JavaScript och töm lagringen: sidan följer systemets tema igen.

Vanliga misstag #

• Skriptet i slutet av sidan. Blinkningen kommer tillbaka: valet blir känt för sent.
• Inget color-scheme på :root. Utan det vet light-dark() inte vilket värde som ska användas.
• Inget try runt localStorage. I privat läge går sidan sönder i vissa webbläsare.
• Temat bara i JavaScript. Utan skriptet får besökaren inget mörkt tema, även om det är påslaget i systemet. Receptet löser det med color-scheme.
• Kontrasten är inte kontrollerad. Text och bakgrund bör ge minst 4,5 till 1, tillgänglighetskravet WCAG AA. Kontrollera båda temana, inte bara ett.