Dark mode i tematyzacja interfejsu użytkownika
Dark Mode (tryb ciemny) stał się niezwykle popularny w ostatnich latach. Polega on na zamianie jasnego tła interfejsu na ciemne, co może zmniejszyć zmęczenie oczu, oszczędzać energię na urządzeniach z ekranami OLED i po prostu wyglądać nowocześnie. Tematyzacja interfejsu pozwala natomiast użytkownikom na dostosowanie wyglądu strony do własnych preferencji.
W tej lekcji dowiesz się, jak zaimplementować Dark Mode na swojej stronie internetowej, jak umożliwić użytkownikom przełączanie między różnymi motywami oraz jakie są najlepsze praktyki w tematyzacji interfejsu użytkownika.
Dlaczego Dark Mode i tematyzacja są ważne?
- Doświadczenie użytkownika: Dają użytkownikom kontrolę nad wyglądem strony, co może zwiększyć ich zadowolenie.
- Dostępność: Ciemne tło może być bardziej komfortowe dla oczu, szczególnie w słabym oświetleniu.
- Trendy: Wiele nowoczesnych aplikacji i systemów operacyjnych oferuje tryb ciemny, więc użytkownicy się go spodziewają.
- Oszczędność energii: Na urządzeniach z ekranami OLED ciemne piksele zużywają mniej energii.
Media Queries i preferencje użytkownika
CSS oferuje funkcję, która pozwala na dostosowanie stylów do preferencji systemu operacyjnego użytkownika.
prefers-color-scheme
prefers-color-scheme to media query, które sprawdza, czy użytkownik ma ustawiony tryb jasny czy ciemny w systemie.
Wartości:
light: Użytkownik preferuje jasny motyw.dark: Użytkownik preferuje ciemny motyw.no-preference: Brak określonej preferencji.
Przykład:
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #ffffff;
}
}
Implementacja Dark Mode za pomocą CSS
Krok 1: Ustawienie domyślnych stylów
Zacznij od zdefiniowania stylów dla jasnego motywu (lub domyślnego).
Przykład:
body {
background-color: #ffffff;
color: #000000;
}
Krok 2: Dodanie stylów dla Dark Mode
Użyj @media (prefers-color-scheme: dark), aby zdefiniować stylizacje dla trybu ciemnego.
Przykład:
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #ffffff;
}
}
Krok 3: Dostosowanie innych elementów
Pamiętaj o stylizacji wszystkich elementów, które mogą wymagać innego wyglądu w trybie ciemnym, takich jak:
- Nagłówki
- Linki
- Przyciski
- Formularze
Przykład:
/* Domyślny styl linków */
a {
color: #007bff;
}
/* Styl linków w Dark Mode */
@media (prefers-color-scheme: dark) {
a {
color: #66b2ff;
}
}
Umożliwienie użytkownikowi przełączania motywów
Chociaż prefers-color-scheme jest przydatne, warto dać użytkownikowi możliwość ręcznego wyboru motywu.
Krok 1: Struktura HTML
Dodaj przełącznik motywów, np. jako przycisk lub przełącznik.
Przykład:
<button id="theme-toggle">Zmień motyw</button>
Krok 2: Stylizacja motywów z klasami CSS
Zamiast polegać wyłącznie na media queries, użyj klas CSS do kontrolowania motywu.
Przykład CSS:
/* Styl dla jasnego motywu */
body.light-theme {
background-color: #ffffff;
color: #000000;
}
/* Styl dla ciemnego motywu */
body.dark-theme {
background-color: #121212;
color: #ffffff;
}
Krok 3: JavaScript do przełączania motywów
Dodaj skrypt, który będzie przełączał klasy na elemencie <body>.
Przykład JavaScript:
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
themeToggle.addEventListener('click', () => {
if (body.classList.contains('dark-theme')) {
body.classList.replace('dark-theme', 'light-theme');
localStorage.setItem('theme', 'light');
} else {
body.classList.replace('light-theme', 'dark-theme');
localStorage.setItem('theme', 'dark');
}
});
Krok 4: Zapisywanie preferencji użytkownika
Użyj localStorage, aby zapamiętać wybór użytkownika.
Przykład JavaScript (kontynuacja):
// Sprawdź, czy użytkownik ma zapisany motyw
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
body.classList.add(savedTheme + '-theme');
} else {
// Jeśli nie, ustaw motyw zgodnie z preferencjami systemowymi
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
body.classList.add(prefersDarkScheme ? 'dark-theme' : 'light-theme');
}
Dostosowanie elementów graficznych
Pamiętaj, że nie tylko kolory tła i tekstu mogą wymagać zmiany w trybie ciemnym. Elementy graficzne, takie jak obrazy i ikony, mogą wymagać dostosowania.
Przykład: Ikony w formacie SVG
Jeśli używasz ikon SVG, możesz zmienić ich kolor za pomocą CSS.
Przykład CSS:
.icon {
fill: #000000;
}
@media (prefers-color-scheme: dark) {
.icon {
fill: #ffffff;
}
}
Przykład: Obrazy w różnych wersjach
Jeśli masz obrazy, które źle wyglądają w trybie ciemnym, możesz użyć picture z media queries.
Przykład HTML:
<picture>
<source srcset="obrazek-ciemny.png" media="(prefers-color-scheme: dark)">
<img src="obrazek-jasny.png" alt="Opis obrazka">
</picture>
Dobre praktyki
1. Kontrast kolorów
Upewnij się, że kontrast między tekstem a tłem jest wystarczający w obu motywach. Możesz użyć narzędzi do sprawdzania kontrastu, takich jak WebAIM Contrast Checker.
2. Unikaj nasyconych kolorów na ciemnym tle
Nasycone kolory mogą być zbyt intensywne na ciemnym tle. Rozważ użycie jaśniejszych odcieni lub zmniejszenie nasycenia.
3. Testuj na różnych urządzeniach
Sprawdź, jak Twoja strona wygląda w obu motywach na różnych przeglądarkach i urządzeniach.
4. Szanuj preferencje użytkownika
Jeśli użytkownik wybrał konkretny motyw, nie zmieniaj go bez jego zgody.
5. Używaj CSS Custom Properties (zmiennych CSS)
Zmiennych CSS możesz użyć do łatwego zarządzania kolorami i innymi właściwościami.
Przykład CSS:
:root {
--background-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
body.dark-theme {
--background-color: #121212;
--text-color: #ffffff;
}
Użycie zmiennych CSS i @media razem
Możesz połączyć zmienne CSS z @media (prefers-color-scheme) dla jeszcze większej elastyczności.
Przykład CSS:
:root {
--background-color: #ffffff;
--text-color: #000000;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #121212;
--text-color: #ffffff;
}
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
Przykładowa implementacja
HTML (index.html)
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Strona z Dark Mode</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="theme-toggle">Zmień motyw</button>
<h1>Witaj na mojej stronie</h1>
<p>To jest przykładowa treść strony.</p>
<script src="script.js"></script>
</body>
</html>
CSS (style.css)
:root {
--background-color: #ffffff;
--text-color: #000000;
--link-color: #007bff;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
/* Motyw ciemny */
body.dark-theme {
--background-color: #121212;
--text-color: #ffffff;
--link-color: #66b2ff;
}
JavaScript (script.js)
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
// Sprawdź zapisane preferencje
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
body.classList.add(savedTheme + '-theme');
} else {
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
body.classList.add(prefersDarkScheme ? 'dark-theme' : 'light-theme');
}
themeToggle.addEventListener('click', () => {
if (body.classList.contains('dark-theme')) {
body.classList.replace('dark-theme', 'light-theme');
localStorage.setItem('theme', 'light');
} else {
body.classList.replace('light-theme', 'dark-theme');
localStorage.setItem('theme', 'dark');
}
});
Testowanie i debugowanie
- Sprawdź preferencje systemowe: Zmień tryb systemu operacyjnego na jasny lub ciemny i zobacz, jak strona reaguje.
- Symuluj media queries: W narzędziach deweloperskich przeglądarki możesz symulować
prefers-color-scheme. - Konsola: Używaj konsoli JavaScript do debugowania ewentualnych problemów.
Częste problemy i ich rozwiązania
1. Zmienne CSS nie działają
- Rozwiązanie: Upewnij się, że używasz prefiksu
var()przy odwoływaniu się do zmiennych.
2. Mieszanie motywów
- Problem: Niektóre elementy nie zmieniają się po przełączeniu motywu.
- Rozwiązanie: Sprawdź, czy wszystkie kolory są zdefiniowane za pomocą zmiennych lub w ramach odpowiednich klas.
3. Przełącznik motywów nie działa
- Rozwiązanie: Sprawdź, czy skrypt JavaScript jest poprawnie podłączony i czy nie ma błędów w konsoli.
Dodatkowe wskazówki
- Animacje przełączania: Możesz dodać płynne przejścia między motywami za pomocą właściwości CSS
transition. - Więcej motywów: Jeśli chcesz zaoferować więcej niż dwa motywy, możesz rozszerzyć logikę skryptu i stylów.
- Dostosowanie przełącznika: Użyj ikon lub bardziej zaawansowanych elementów interfejsu dla przełącznika motywów.
Podsumowanie
W tej lekcji nauczyliśmy się:
- Czym jest Dark Mode i dlaczego jest ważny w nowoczesnym web developmencie.
- Jak używać media queries
prefers-color-scheme, aby dostosować styl strony do preferencji użytkownika. - Jak umożliwić użytkownikowi ręczne przełączanie motywów za pomocą JavaScript i klas CSS.
- Dobrych praktyk w tematyzacji interfejsu użytkownika, takich jak użycie zmiennych CSS i dbałość o kontrast kolorów.
- Jak dostosować elementy graficzne i unikać typowych problemów związanych z implementacją motywów.
Tematyzacja interfejsu użytkownika i implementacja Dark Mode to świetny sposób na poprawę doświadczenia użytkownika i dostosowanie strony do nowoczesnych standardów. Dzięki temu Twoja strona stanie się bardziej atrakcyjna i przyjazna dla użytkowników.
Zadania do samodzielnego wykonania
-
Dodaj Dark Mode do swojej strony:
- Zastosuj wiedzę z tej lekcji, aby dodać tryb ciemny do istniejącej strony.
- Upewnij się, że wszystkie elementy są poprawnie stylizowane w obu motywach.
-
Ulepsz przełącznik motywów:
- Zamiast prostego przycisku, użyj przełącznika z ikonami (np. słońce i księżyc).
- Dodaj animacje przejścia między motywami.
-
Eksperymentuj z innymi motywami:
- Dodaj trzeci motyw, np. z akcentem kolorystycznym.
- Pozwól użytkownikowi wybierać spośród kilku dostępnych motywów.
-
Sprawdź dostępność:
- Upewnij się, że kontrast kolorów w obu motywach spełnia wytyczne WCAG.
- Przetestuj stronę za pomocą czytnika ekranu.
Ciekawostka
Czy wiesz, że tryb ciemny może znacznie wydłużyć czas pracy baterii w urządzeniach z ekranami OLED? W ekranach tego typu piksele emitują własne światło, a czarne piksele są po prostu wyłączone, co zmniejsza zużycie energii. Dlatego coraz więcej aplikacji i systemów operacyjnych wprowadza wsparcie dla trybu ciemnego.
| Testy przypięte do lekcji | |
|---|---|
| Aby uzyskać dostęp do testów i ćwiczeń interaktywnych - Zaloguj się |