Tryb ciemny krok 1: wszystko w stylach

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

Przełącznik trybu ciemnego napisany przez `style`. Każdy kolor każdego elementu jest ustawiany w skrypcie i to dwa razy (dla trybu jasnego i ciemnego). Wygląd jest rozsypany po JavaScripcie, a nowy element strony wymaga zmian w obu gałęziach.

<!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; }
  </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>
    let dark = false;
    document.getElementById('theme').addEventListener('click', e => {
      dark = !dark;
      const body = document.body;
      const top = document.getElementById('top');
      if (dark) {
        body.style.backgroundColor = '#0f172a';
        body.style.color = '#e2e8f0';
        top.style.borderBottom = '2px solid #475569';
        e.target.textContent = 'Tryb jasny';
      } else {
        body.style.backgroundColor = 'white';
        body.style.color = '#0f172a';
        top.style.borderBottom = '2px solid #cbd5e1';
        e.target.textContent = '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.