0Pricing
CSS Academy · Lekcja

Automatyczne i ręczne przełączanie trybu ciemnego

Zbuduj przełącznik motywu, który domyślnie respektuje preferencje systemowe i pozwala użytkownikom ręcznie je zastąpić.

Automatyczne i ręczne przełączanie trybu ciemnego to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Cel

Idealna implementacja trybu ciemnego domyślnie automatycznie wykrywa preferencje systemu operacyjnego i udostępnia przycisk przełączania, który pozwala użytkownikowi niezależnie je nadpisać, a także zachowuje tę preferencję między kolejnymi wczytaniami stron.

Przegląd architektury

Należy obsłużyć trzy stany:

  1. Preferencja systemowa: należy użyć prefers-color-scheme wraz ze zmiennymi CSS
  2. Ręczne ustawienie użytkownika: ciemny: należy ustawić klasę lub atrybut danych na elemencie <html>
  3. Ręczne ustawienie użytkownika: jasny: należy ustawić inną klasę, aby zapobiec automatycznemu włączeniu trybu ciemnego

Konfiguracja tokenów CSS

Należy zdefiniować zmienne CSS, które będą prawidłowo kaskadować we wszystkich stanach:

<div class="demo" data-theme="dark">Dark token demo</div>
<div class="demo" data-theme="light">Light token demo</div>

Logika przełączania w JavaScript

Należy odczytać zapisaną preferencję, zastosować ją i aktualizować przy przełączaniu:

<div class="demo" id="theme-demo">Toggle my theme</div>
<div class="demo" data-theme="dark">Dark override example</div>
<button id="toggle-btn">Toggle Theme</button>
<script>
  function toggleTheme() {
    const current = document.getElementById('theme-demo').dataset.theme;
    const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    if (!current) {
      const next = system === 'dark' ? 'light' : 'dark';
      document.getElementById('theme-demo').dataset.theme = next;
    } else {
      delete document.getElementById('theme-demo').dataset.theme;
    }
  }
  document.getElementById('toggle-btn').addEventListener('click', toggleTheme);
</script>

Przełącznik trójstanowy

Bardziej rozbudowany przełącznik trójstanowy: Jasny | Systemowy | Ciemny:

<div class="demo" id="theme-demo">Cycles: light → system → dark</div>
<div class="demo" data-theme="dark">Dark state example</div>
<p id="state-label">system</p>
<button id="cycle-btn">Cycle Theme</button>
<script>
  const states = ['light', 'system', 'dark'];
  let current = 'system';
  const demo = document.getElementById('theme-demo');
  const label = document.getElementById('state-label');
  document.getElementById('cycle-btn').addEventListener('click', () => {
    current = states[(states.indexOf(current) + 1) % states.length];
    label.textContent = current;
    if (current === 'system') { delete demo.dataset.theme; } else { demo.dataset.theme = current; }
  });
</script>

Zapobieganie mignięciu niewłaściwego motywu

Zapisany motyw należy zastosować synchronicznie, zanim strona zostanie wyrenderowana:

<pre class="code-sample">&lt;!-- In &lt;head&gt;, before any styles --&gt;
&lt;script&gt;
  const t = localStorage.getItem("theme");
  if (t) document.documentElement.dataset.theme = t;
&lt;/script&gt;</pre>

Dostępność przycisku przełączania

Przycisk przełączania powinien przekazywać czytnikom ekranu informacje o bieżącym stanie. Po przełączeniu należy zaktualizować dostępną etykietę:

<button id="theme-toggle" aria-label="Switch to dark mode">🌙</button>

Animowane przejście motywu

Płynne przejścia kolorów podczas zmiany motywu:

<div class="demo" id="at-demo">Smooth theme transition</div>
<button onclick="document.documentElement.classList.add('theme-transitioning'); const d=document.getElementById('at-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff'; setTimeout(()=>document.documentElement.classList.remove('theme-transitioning'),250);">Toggle</button>

Nasłuchiwanie zmian systemowych

Należy również reagować na zmianę preferencji systemu operacyjnego przez użytkownika, gdy strona jest otwarta:

<p id="status">Listening for system theme changes…</p>
<script>
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    document.getElementById('status').textContent = 'System changed to ' + (e.matches ? 'dark' : 'light');
  });
</script>

Ikony trybu ciemnego

Należy zamieniać ikony odpowiednio do każdego trybu. W przypadku obrazów zależnych od motywu należy użyć elementu picture albo CSS do wyświetlania i ukrywania różnych ikon:

<div>Light: <span class="icon-sun">☀️</span><span class="icon-moon">🌙</span></div>
<div data-theme="dark">Dark: <span class="icon-sun">☀️</span><span class="icon-moon">🌙</span></div>

Podsumowanie: lista kontrolna implementacji

Lista kontrolna trybu ciemnego:

  • Zmienne CSS dla wszystkich tokenów kolorów
  • Zapytanie medialne prefers-color-scheme do automatycznego wykrywania
  • Atrybut data-theme do ręcznego nadpisywania
  • localStorage do zachowania ustawień
  • Skrypt wbudowany w sekcji head, zapobiegający mignięciu
  • Dostępny przycisk przełączania z dynamiczną wartością aria-label

Szybkie sprawdzenie

Jaka technika zapobiega „mignięciu niewłaściwego motywu” podczas wczytywania strony?

Podsumowanie

Kompletny przełącznik trybu ciemnego używa zmiennych CSS dla tokenów motywu, zapytania prefers-color-scheme do automatycznego wykrywania, atrybutu data-theme do ręcznego nadpisywania, localStorage do zachowania ustawień oraz synchronicznego skryptu w sekcji head, który zapobiega mignięciu. Aby zapewnić najlepsze doświadczenie użytkownika, należy udostępnić dostępny przełącznik trójstanowy (jasny/systemowy/ciemny).

Często zadawane pytania

Czy lekcja „Automatyczne i ręczne przełączanie trybu ciemnego” jest bezpłatna?

Tak — pełny tekst „Automatyczne i ręczne przełączanie trybu ciemnego” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Automatyczne i ręczne przełączanie trybu ciemnego”?

Zbuduj przełącznik motywu, który domyślnie respektuje preferencje systemowe i pozwala użytkownikom ręcznie je zastąpić. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Automatyczne i ręczne przełączanie trybu ciemnego”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Zapytanie medialne prefers-color-scheme
  2. Zmienne CSS do obsługi motywów
  3. Właściwość color-scheme
  4. Automatyczne i ręczne przełączanie trybu ciemnego
← Powrót do CSS Academy