Coraz więcej użytkowników internetu oczekuje, że strony internetowe będą oferować tryb ciemny i jasny, między którymi można łatwo przełączać się w zależności od preferencji. To nie tylko kwestia estetyki – odpowiednio wdrożony przełącznik trybu wpływa na dostępność cyfrową, komfort użytkowników oraz postrzeganie marki. W tym poradniku krok po kroku pokażemy, jak wdrożyć przełącznik trybu jasnego i ciemnego na stronie WordPress w sposób zgodny z dobrymi praktykami UX, dostępności WCAG oraz SEO.
### Dlaczego warto wdrożyć przełącznik trybu jasnego i ciemnego?
1. **Lepsze UX** – Użytkownicy mogą dopasować wygląd strony do warunków oświetleniowych lub własnych preferencji.
2. **Dostępność** – Tryb ciemny może być korzystniejszy dla osób z wrażliwością na światło lub problemami ze wzrokiem.
3. **Wizerunek nowoczesnej marki** – Strona z trybem ciemnym wygląda bardziej profesjonalnie i innowacyjnie.
4. **Oszczędność energii** – Na urządzeniach z ekranami OLED tryb ciemny zużywa mniej energii.
### Krok 1: Zaplanuj strukturę i style
Zanim zaczniesz wdrażać tryb ciemny, zaplanuj, które elementy strony będą zmieniać swój wygląd. Najczęściej są to tło, teksty, przyciski, nagłówki i linki. Przygotuj dwa zestawy kolorów: jeden dla trybu jasnego, drugi dla ciemnego. Pamiętaj o odpowiednim kontraście – zgodnym z WCAG 2.1.
### Krok 2: Dodaj przełącznik trybu do motywu
Najlepiej dodać przełącznik w widocznym miejscu – np. w nagłówku strony lub w stopce. Można to zrobić za pomocą prostego kodu HTML i JavaScript, który zapisuje preferencje użytkownika w localStorage:
„`html
„`
„`javascript
const toggle = document.getElementById(’theme-toggle’);
toggle.addEventListener(’click’, () => {
document.body.classList.toggle(’dark-mode’);
localStorage.setItem(’theme’, document.body.classList.contains(’dark-mode’) ? 'dark’ : 'light’);
});
window.onload = () => {
if (localStorage.getItem(’theme’) === 'dark’) {
document.body.classList.add(’dark-mode’);
}
};
„`
### Krok 3: Dodaj odpowiednie style CSS
Przygotuj style CSS dla obu trybów z wykorzystaniem klas lub zmiennych CSS:
„`css
body {
–bg-color: #ffffff;
–text-color: #000000;
background-color: var(–bg-color);
color: var(–text-color);
}
body.dark-mode {
–bg-color: #121212;
–text-color: #ffffff;
}
„`
### Krok 4: Zadbaj o SEO i dostępność
– **SEO**: Upewnij się, że przełącznik trybu nie wpływa na indeksowanie strony przez Google. Najlepiej, by tryby były realizowane po stronie klienta (JavaScript + CSS), bez tworzenia osobnych wersji URL.
– **Dostępność**: Dodaj etykiety aria-label do przycisku przełącznika i zadbaj o odpowiedni kontrast oraz czytelność tekstu w obu trybach.
### Krok 5: Testuj na różnych urządzeniach
Sprawdź, czy przełącznik działa poprawnie na desktopach, tabletach i smartfonach. Przetestuj także, czy działa w różnych przeglądarkach i nie powoduje błędów w wyświetlaniu treści.
### Podsumowanie
Wdrożenie przełącznika trybu jasnego i ciemnego w WordPressie nie musi być trudne ani czasochłonne. To niewielki detal, który znacząco poprawia odbiór strony przez użytkowników, zwiększa jej dostępność i może pozytywnie wpłynąć na SEO. Jeśli prowadzisz stronę firmową lub sklep internetowy – warto zadbać o ten aspekt UX. W razie potrzeby – zespół twojastrona.pro z Suwałk chętnie Ci w tym pomoże.
