Dark mode, czyli tryb ciemny, to nieodłączny element wielu stron internetowych i aplikacji mobilnych. Zyskuje coraz większą popularność ze względu na swoją estetykę i wygodę użytkowania. Ale czy warto zdecydować się na implementację dark mode na swojej stronie internetowej? W tym artykule przeanalizujemy tę kwestię, omawiając zalety, wady oraz wpływ na użytkowników i pozycjonowanie SEO.
Spis treści:
- Czym jest dark mode?
- Zalety i wady trybu ciemnego
- Dark mode a SEO: Wpływ na pozycjonowanie
- Przykłady implementacji dark mode w praktyce
- Dark Mode vs Wysoki kontrast (WCAG)
- Podsumowanie - czy warto?
Czym jest dark mode?
Dark mode, zwany również trybem ciemnym, to alternatywny wygląd interfejsu graficznego, w którym dominują ciemne kolory tła i jasne elementy tekstu. Pierwotnie stosowany głównie w aplikacjach mobilnych i systemach operacyjnych, obecnie coraz częściej pojawia się także na stronach internetowych.
Na tych stronach często występuje przełącznik tego trybu, który może przyjąć formę suwaka lub grafiki słońca / księżyca. Zerknij w prawy górny róg naszej strony – znajdziesz go i tam 😊
Zalety i wady trybu dark mode
Zalety:
- Redukcja zmęczenia wzroku: Ciemne tło zmniejsza emisję światła niebieskiego, co może zmniejszyć zmęczenie oczu, szczególnie podczas długiego korzystania ze stron internetowych.
Zachęcam do poprzeglądania naszej strony w trybie dark mode i bez niego (light mode), za dnia i nocą + oceny zmęczenia oczu 😊 - Estetyka: Dla wielu użytkowników tryb ciemny jest po prostu bardziej atrakcyjny wizualnie i nowoczesny.
- Przyjazny dla nocnych użytkowników: Dla osób korzystających z internetu głównie wieczorem czy w nocy, ciemne tło może być bardziej komfortowe dla oczu.
- Energia: Na urządzeniach z ekranami OLED, tryb ciemny może nawet zmniejszyć zużycie energii, co przedłuża czas pracy baterii.
Wady trybu ciemnego
- Problemy z czytelnością: Niektórzy użytkownicy mogą mieć trudności z czytaniem jasnego tekstu na ciemnym tle, szczególnie w słabym oświetleniu.
- Dodatkowy nakład pracy: Implementacja dark mode może wymagać dodatkowego czasu i wysiłku ze strony projektantów i programistów, co często prowadzi do większych kosztów.
- Kompromis estetyczny: Nie zawsze dark mode będzie pasował do estetyki danej strony internetowej lub jej tematyki.
Dark mode może więc być wartościową opcją dla wielu użytkowników, zwłaszcza dla tych, którzy spędzają dużo czasu korzystając z internetu wieczorem lub w nocy. Jednakże, należy pamiętać, że preferencje użytkowników mogą się różnić, dlatego warto zapewnić możliwość wyboru trybu, aby każdy mógł dostosować stronę do własnych potrzeb i preferencji.
Jeżeli masz na swojej stronie (obecnej, a którą zamierzasz przebudować) wgląd w statystyki np. Google Analytics – zerknij, w jakich porach klienci / użytkownicy taką stronę przeglądają, będzie to też punkt podpowiedzi dla Ciebie – czy rozwiązanie jest warte dodania.
Tryb ciemny a pozycjonowanie strony
Dlaczego warto zwrócić uwagę na ten aspekt?
Dark mode może przyczynić się do poprawy doświadczenia użytkownika, co jest jednym z czynników, które Google bierze pod uwagę przy ocenie witryny. Jeśli użytkownicy dłużej pozostają na stronie i korzystają z niej chętniej, może to pozytywnie wpłynąć na jej pozycję w wynikach wyszukiwania.
Dostosowanie do preferencji użytkownika.
Coraz więcej osób korzysta z trybu dark mode ze względów estetycznych, ale także dla oszczędności energii na urządzeniach mobilnych. Dostosowanie witryny do preferencji użytkownika może zwiększyć jej atrakcyjność i w rezultacie poprawić wskaźniki związane z interakcją użytkowników.
Wprowadzenie trybu ciemnego może sprawić, że użytkownicy będą chętniej przeglądać treści na stronie, zwłaszcza w warunkach słabego oświetlenia. Dłuższy czas spędzony na stronie może wpłynąć na wskaźniki takie jak średni czas na stronie czy wskaźnik odrzuceń, co może mieć pozytywny wpływ na SEO.
Nie może zabraknąć również – lepszej czytelność i skupienie - zwłaszcza w nocy lub w warunkach niskiego kontrastu. To z kolei może zwiększyć skupienie użytkowników na treściach witryny i zmotywować ich do dłuższego przebywania na stronie.
Dark mode w CSS3, Javascript – przykłady
W tym artykule dorzucę kilka przykładów prostej implementacji tego trybu na stronie internetowej.
CSS3
W CSS3 możemy zastosować media query, aby zmieniać style w zależności od preferencji kolorystycznych użytkownika. Na przykład:
/* Style dla trybu jasnego */
body {
background-color: #ffffff;
color: #333333;
}
/* Style dla trybu ciemnego */
@media (prefers-color-scheme: dark) {
body {
background-color: #333333;
color: #ffffff;
}
}prefers-color-scheme: dark
Fragment kodu wyżej jest ciekawym rozwiązaniem. Powoduje pobranie ustawienia urządzenia – jeżeli korzystasz z trybu dark mode w telefonie, strona automatycznie przełączy się w taki tryb.
Implementacja w JavaScript
Możemy również użyć JavaScriptu, aby umożliwić użytkownikom ręczne przełączanie się między trybem jasnym a ciemnym.
const toggleSwitch = document.querySelector('.toggle-switch');
toggleSwitch.addEventListener('change', function() {
if(this.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
});
// Pobieranie preferowanego trybu z localStorage
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}Opcje cookies vs localStorage:
Cookies:
- Cookies są przechowywane po stronie klienta i są wysyłane z każdym zapytaniem HTTP, co może wpłynąć na wydajność.
- Mogą być ograniczone pod względem rozmiaru i mogą być ustawione z ograniczonym czasem życia.
- Mogą być używane do przechowywania preferencji użytkownika, takich jak tryb kolorystyczny.
localStorage:
- localStorage jest bardziej wydajne niż cookies, ponieważ dane są przechowywane tylko po stronie klienta.
- Może przechowywać większe ilości danych niż cookies.
- Dostęp do danych w localStorage jest ograniczony do strony, która je zapisuje. Dane w cookies są wysyłane z każdym zapytaniem HTTP, co naraża je na ataki typu CSRF (Cross-Site Request Forgery).
Wybór między cookies a localStorage zależy od konkretnych wymagań aplikacji oraz preferencji dewelopera. Jeśli chcesz zapamiętać tylko preferencje trybu kolorystycznego, localStorage jest zazwyczaj lepszym wyborem ze względu na jego wydajność i łatwość użycia.
Kod HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład Trybu Ciemnego</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<header>
<h1>Przykład Trybu Ciemnego</h1>
<label class="switch">
<input type="checkbox" class="toggle-switch">
<span class="slider round"></span>
</label>
</header>
<div class="content">
<p>To jest przykładowa treść strony, która demonstruje implementację trybu ciemnego.</p>
<p>Zmiana kolorów na ciemne nie tylko może poprawić komfort czytania w nocy, ale także zmniejszyć zmęczenie wzroku.</p>
<p>Wybierz preferowany tryb kolorystyczny za pomocą przełącznika powyżej.</p>
</div>
<script src="/script.js"></script>
</body>
Różnice dark mode vs wysoki kontrast (WCAG)
O różnicach część dalsza 😊 Niektóre pojęcia się powtórzą, ale to tylko w ramach samego porównania tych rozwiązań.
Dark mode
- Dark mode, nazywany również trybem ciemnym, to opcja interfejsu, która zmienia kolorystykę strony internetowej na ciemne tła z jasnym tekstem.
- Ta funkcja jest szczególnie korzystna dla użytkowników korzystających z internetu w warunkach słabego oświetlenia, np. w nocy, gdy jasne tła mogą być rażące dla oczu.
- Dark mode może również zmniejszyć emisję światła niebieskiego, co może zmniejszyć zmęczenie wzroku i poprawić komfort użytkowania.
- W kontekście WCAG, dark mode może pomóc w spełnieniu wytycznych dotyczących kontrastu, zwłaszcza w przypadku, gdy jasny tekst jest wyświetlany na ciemnym tle, co może poprawić czytelność dla niektórych użytkowników.
Wysoki kontrast
- Wysoki kontrast odnosi się do wyraźnej różnicy między kolorem tekstu a tłem, co ułatwia odczyt użytkownikom z różnymi potrzebami wzrokowymi. Barwy często stosowane na stronach to czarny z żółtym, oraz czarny z białym.
- Ta funkcja jest kluczowa dla osób z zaburzeniami widzenia, takimi jak daltonizm lub trudności w rozróżnianiu kolorów, ponieważ pomaga w wyraźnym rozróżnieniu między elementami interfejsu.
- Wysoki kontrast jest również ważnym elementem spełniającym wytyczne WCAG, szczególnie dotyczące czytelności tekstu. Zgodnie z wytycznymi, tekst musi być wystarczająco czytelny, co często wymaga kontrastu między tekstem a tłem na poziomie określonym przez standardy dostępności.
W ramach końca
I tym sposobem docieramy do finału artykułu. Czy warto mieć dark mode? Jak najbardziej, standardy się zmieniają, a że technologia daje takie możliwości – czemu z niej nie skorzystać 😊
Masz pytania?
Budujemy strony z trybem dark mode!
Michał
Autor