Ciemny motyw bez błysku: przełącznik, który pamięta wybór

Włączasz ciemny motyw, a przy każdym przeładowaniu strona na ułamek sekundy błyska bielą, zanim zrobi się ciemna. To najczęstszy błąd w przełączniku motywu, a naprawia go jeden malutki skrypt we właściwym miejscu. Poniżej cały przepis: kod do skopiowania, wyjaśnienie, jak działa, i sposób, by samodzielnie sprawdzić wynik.

Co otrzymasz #

• Domyślnie motyw odpowiada motywowi systemu (jasnemu lub ciemnemu) i działa nawet przy wyłączonym JavaScripcie.
• Przycisk przełącza motyw, a wybór jest zapamiętywany w przeglądarce.
• Zapamiętany wybór jest stosowany przed pierwszym wyrenderowaniem: żadnego białego błysku przy przeładowaniu.

Dlaczego strona błyska #

Krok 1. Zadeklaruj, że strona ma oba motywy #

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

Krok 2. Opisz kolory raz #

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

Krok 3. Dodaj przycisk #

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

Sprawdź sam #

Sprawdziliśmy też resztę: bez JavaScriptu strona przyjmuje motyw systemu, po naciśnięciu przycisku i przeładowaniu wybór zostaje, a przy 390, 768 i 1280 punktach nie ma poziomego przewijania.
Możesz to powtórzyć tak:

1. Otwórz stronę, naciśnij przycisk i wybierz ciemny motyw.
2. Włącz w narzędziach deweloperskich ograniczenie sieci i przeładuj stronę: tło jest ciemne od pierwszej klatki.
3. Wyłącz JavaScript i wyczyść pamięć: strona znów podąża za motywem systemu.

Częste błędy #

• Skrypt na końcu strony. Błysk wraca: wybór jest znany za późno.
• Brak color-scheme w :root. Bez niego light-dark() nie wie, którą wartość wziąć.
• Brak try wokół localStorage. W trybie prywatnym w niektórych przeglądarkach strona się psuje.
• Motyw tylko w JavaScripcie. Bez skryptu odwiedzający nie ma ciemnego motywu, nawet jeśli włączył go w systemie. Przepis rozwiązuje to przez color-scheme.
• Niesprawdzony kontrast. Tekst i tło powinny dawać co najmniej 4,5 do 1, zgodnie z zasadą dostępności WCAG AA. Sprawdź oba motywy, nie jeden.