Tryb ciemny krok 2: klasa zamiast stylów

Wygląd strony: style i klasy - JavaScript na stronach WWW (HTML/CSS/JS)

Refaktoryzacja: wygląd obu trybów jest w CSS (reguły dla `body.dark`), a skrypt tylko przełącza klasę: `classList.toggle('dark')` dodaje ją, gdy jej nie ma, i usuwa, gdy jest, a zwraca nowy stan. Zmiana kolorów to teraz zmiana w CSS, bez dotykania skryptu. Strona działa tak samo jak w kroku 1.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Tryb ciemny</title>
  <style>
    body { font-family: sans-serif; max-width: 36em; line-height: 1.4; }
    input, select, button, textarea { font: inherit; padding: 0.2em 0.4em; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #94a3b8; padding: 0.2em 0.6em; }

                    body { background: white; color: #0f172a; }
                    #top { border-bottom: 2px solid #cbd5e1; }
                    body.dark { background: #0f172a; color: #e2e8f0; }
                    body.dark #top { border-bottom-color: #475569; }
  </style>
</head>
<body>
  <header id="top">
    <h1>Mój blog</h1>
    <button id="theme">Tryb ciemny</button>
  </header>
  <p id="post">Wpis o tym, jak skrypt zmienia wygląd strony.</p>
  <script>
    document.getElementById('theme').addEventListener('click', e => {
      const dark = document.body.classList.toggle('dark');
      e.target.textContent = dark ? 'Tryb jasny' : 'Tryb ciemny';
    });
  </script>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu JavaScript na stronach WWW·Zaloguj się, aby zapisać postęp na koncie.