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