cresvin.pl

JavaScript: Jak dodać ciemny motyw na stronie

Dowiedz się, jak łatwo dodać tryb ciemny do swojej strony przy użyciu HTML, CSS i JavaScriptu. Wykryj preferencje użytkownika, zapamiętaj jego wybór w localStorage i zastosuj to wszystko w prostym projekcie.

Pokazowy gif

Wprowadzenie

Coraz więcej użytkowników korzysta z trybu ciemnego na swoich urządzeniach — jest on przyjemniejszy dla oczu, oszczędza baterię i bywa po prostu estetyczny. W tym artykule pokażę Ci, jak w prosty sposób dodać przełącznik motywu ciemnego i jasnego do swojej strony, wykorzystując czysty HTML, CSS i JavaScript.

Nie będziemy używać żadnych frameworków ani bibliotek UI — wszystko zbudujemy od podstaw. Dodatkowo zapiszemy preferencje użytkownika w localStorage, aby jego wybór był zapamiętany przy kolejnych odwiedzinach.

Krok 1: Stwórz przycisk przełączania motywu w pliku index.html

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="style.css" rel="stylesheet" />
    <title>Moja strona</title>
  </head>
  <body>
    <button id="toggle-theme">Przęłącz motyw</button>
    <script src="main.js"></script>
  </body>
</html>

Krok 2: Dodaj style

style.css
/* Resetowanie domyślnych marginesów i paddingu, ustawienie modelu pudełkowego */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
 
/* Styl motywu jasnego – domyślne zmienne CSS dla kolorów tła, tekstu i przycisku */
.light {
  --bg-color: #fff;
  --color: #000;
 
  --btn-bg-color: #000;
  --btn-color: #fff;
}
 
/* Styl motywu ciemnego – alternatywne zmienne CSS */
.dark {
  --bg-color: #1d1d1d;
  --color: #fff;
 
  --btn-bg-color: #fff;
  --btn-color: #000;
}
 
body {
  background-color: var(--bg-color);
  color: var(--color);
  display: grid;
  place-content: center;
  min-height: 100vh;
  transition: background-color 0.3s;
}
 
button {
  border: none;
  background: none;
  background-color: var(--btn-bg-color);
  color: var(--btn-color);
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-family: monospace;
}

Krok 3: Dodaj logikę przełączania motywu

main.js
// Przycisk do przęłączania motywów.
const toggleThemeBtn = document.querySelector("#toggle-theme");
 
// Podstawowy motyw.
const defaultTheme = "light";
 
// Nazwa wartości motywu w localStorage.
const themeKey = "theme";
 
// Funkcja pomocnicza do pobierania motywu z localStorage.
const getThemeFromLocalStorage = () => {
  const theme = window.localStorage.getItem(themeKey) ?? defaultTheme;
  return theme;
};
 
// Funkcja zapisująca motyw do localStorage.
const updateLocalStorageTheme = (newTheme) => {
  window.localStorage.setItem(themeKey, newTheme);
};
 
// Ustaw motyw na podstawie danych z localStorage.
const setThemeFromStorage = () => {
  const theme = getThemeFromLocalStorage();
 
  // Jeśli motyw nie istnieje w localStorage, zgłoś błąd.
  if (theme === null) {
    return console.error(
      "Wystąpił błąd: nie znaleziono motywu w localStorage!",
    );
  }
 
  // Dodaj klasę motywu do elementu <html>.
  document.documentElement.classList.add(theme);
};
 
// Ustaw motyw po załadowaniu strony.
setThemeFromStorage();
 
// Funkcja przełączająca motyw.
const handleToggleTheme = () => {
  // Pobierz aktualny motyw z localStorage.
  const theme = getThemeFromLocalStorage();
 
  // Zmienna do przechowania poprzedniego i nowego motywu.
  let prevTheme;
  let currTheme;
 
  /**
   * Ustal poprzedni i nowy motyw na podstawie aktualnie ustawionego motywu.
   * Jeśli motyw to 'dark', zmień go na 'light'; jeśli 'light', zmień na 'dark'.
   * W przypadku innej wartości, zgłoś błąd.
   */
  if (theme === "dark") {
    prevTheme = "dark";
    currTheme = "light";
  } else if (theme === "light") {
    prevTheme = "light";
    currTheme = "dark";
  } else {
    return console.error("Nieprawidłowy motyw.");
  }
 
  // Zamień klasę motywu na nową.
  document.documentElement.classList.replace(prevTheme, currTheme);
 
  // Zaktualizuj wartość 'theme' w localStorage, na nowy motyw.
  updateLocalStorageTheme(currTheme);
};
 
// Dodaj nasłuchiwanie kliknięcia przycisku przełączającego motyw.
toggleThemeBtn.addEventListener("click", handleToggleTheme);

Gotowe

Gratulacje! Masz teraz prostą stronę z przełącznikiem ciemnego i jasnego motywu, który zapamiętuje preferencje użytkownika dzięki localStorage. Cały kod znajdziesz na StackBlitz.