Site icon Kamil Wyremski

Przełączanie tryb ciemny / jasny w JS i CSS

administrator

Coraz więcej witryn internetowych oferuje użytkownikom opcję przełączania między trybem jasnym a ciemnym, co pozwala na dostosowanie wyglądu strony do preferencji użytkownika. W tym artykule dowiesz się, jak stworzyć przełącznik trybu jasnego i ciemnego przy użyciu JavaScript i CSS. Skrypt przy wczytywaniu będzie sprawdzał preferencje użytkownika z przeglądarki i wg tego ustawiał domyślny tryb. Ostatnio wybrany tryb będzie zapisywany w localstorage.

Krok 1: Struktura HTML

Zacznijmy od utworzenia prostego kodu HTML, który zawiera elementy, które chcemy dostosować podczas przełączania między trybami.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Dark mode switcher</title>
  </head>
  <body>
    <div class="container">
      <h1>Welcome to my website!</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo
        urna vel ligula fringilla, sit amet cursus justo luctus.
      </p>
      <label>
        <input type="checkbox" id="darkModeToggle" />
        Tryb Ciemny / Jasny
      </label>
    </div>
    <script src="app.js"></script>
  </body>
</html>

Krok 2: Stylizacja CSS

Teraz stwórzmy plik CSS (style.css), który zawiera style dla obu trybów. Dla trybu ciemnego będziemy ustawiać data-theme="dark" dla tagu <html> dlatego możemy skorzystać z takiego zapisu dla wszystkich kolorów które chcemy zmienić w trybie ciemnym: [data-theme="dark"] [selector CSS]

body {
  font-family: 'Arial', sans-serif;
  transition: background-color 0.3s ease;
}

[data-theme="dark"] body{
  background-color: #333;
  color: #fff;
}

.container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, color 0.3s ease;
}

Krok 3: JavaScript

W pliku app.js dodajemy kod JavaScript, który obsługuje przełącznik i zmienia atrybut data-theme dokumentu w zależności od statusu przełącznika. Na początku w funkcji checkDarkModePreference sprawdzamy czy mamy już zapisaną preferencje użytkownika w localstorage. Jeśli nie to pobieramy domyślną z przeglądarki. Po kliknięciu na checkbox zapisujemy bieżące ustawienie do locastorage, dzięki czemu przy ponownym odświeżeniu strony zostanie ono wczytane.

document.addEventListener('DOMContentLoaded', function () {
  const darkModeToggle = document.getElementById('darkModeToggle');

  function setDarkModePreference(value) {
    localStorage.setItem("darkMode", value.toString());
    document.documentElement.dataset.theme = value ? "dark" : "light";
    darkModeToggle.checked = !!value;
  }

  function checkDarkModePreference() {
    const storedDarkMode = localStorage.getItem("darkMode");
    if (storedDarkMode !== null) {
      setDarkModePreference(storedDarkMode === "true");
    } else {
      const prefersDarkMode = window.matchMedia(
        "(prefers-color-scheme: dark)"
      ).matches;
      setDarkModePreference(prefersDarkMode);
    }
  }

  checkDarkModePreference();

  darkModeToggle.addEventListener('change', function () {
    setDarkModePreference(darkModeToggle.checked)
  });
});

Teraz, gdy użytkownik zmieni tryb jasny/ciemny, preferencje będą zapisywane w localStorage i automatycznie wczytywane przy ponownym odwiedzeniu strony. Jeśli preferencje nie zostały zapisane wcześniej, używane są domyślne ustawienia przeglądarki.

Podsumowanie

Teraz masz działający przełącznik trybu jasnego/ciemnego! Dzięki połączeniu HTML, CSS i JavaScript możemy dostosowywać wygląd strony internetowej do preferencji użytkownika. Baw się kodem i dostosuj go do swoich potrzeb!

Kod przykładu znajduje się na GitHub: https://github.com/kamilwyremski/dark-mode-switcher

Exit mobile version