JavaScript dark mode: jak wykryć ciemny motyw systemu

Ten fragment kodu w JavaScripcie wykrywa, czy użytkownik ustawił swój komputer w dark mode , po polsku tryb ciemny. Jeśli tak, zwraca true. To niewielki kawałek kodu, który potrafi ulepszyć twoją stronę lub aplikację i uczynić ją przystępniejszą dla wszystkich, którzy wolą ciemny interfejs.

JavaScript Dark Mode

const isDarkMode = () =>
	globalThis.matchMedia?.("(prefers-color-scheme:dark)").matches ?? false;

// Użycie
isDarkMode();

Czym jest dark mode, czyli tryb ciemny?

Dark mode to funkcja, która przełącza paletę kolorów urządzenia na ciemniejszą tonację. Wiele osób woli tryb ciemny, bo mniej męczy oczy i ułatwia czytanie tekstu na ekranie. Tryb ciemny jest dostępny na mnóstwie urządzeń, między innymi na smartfonach, laptopach i tabletach.

Jeśli pracujesz nad aplikacjami w JavaScripcie, udostępnienie trybu ciemnego wyraźnie podnosi komfort twoich użytkowników.

Jak włączyć lub wyłączyć tryb ciemny?

Oto jak włączyć ciemne motywy w najpopularniejszych urządzeniach i aplikacjach, w Windowsie, Androidzie, na Macu i w iOS-ie:

Windows

1. W menu Start wybierz Ustawienia, a następnie Personalizacja.
2. Po lewej stronie ekranu wybierz opcję Tło. Możesz pobrać własny ciemny motyw albo wziąć jeden z tych, które daje Windows.
3. Po lewej stronie ekranu wybierz opcję Kolory. Możesz wskazać barwę przyjemniejszą dla oka: szarość, beż albo stonowany żółty lub niebieski, do wyboru.
4. Sprawdź swój kolor w ciemnym motywie, klikając Ciemny w opcji Wybierz domyślny tryb aplikacji. Jeśli wybrane barwy ci nie leżą, spróbuj czegoś innego!

Android

1. Wejdź w Ustawienia, potem w Ułatwienia dostępu i na koniec w Wyświetlacz.
2. Kliknij Ciemny motyw, żeby go zastosować, albo Odwrócenie kolorów, żeby włączyć inwersję.

MacOS

1. Przejdź do Preferencji systemowych.
2. Kliknij Ogólne.
3. Wybierz wygląd, który pasuje ci najbardziej. Do wyboru są opcje jasna, ciemna i automatyczna, zmieniająca się wraz z porą dnia.

iOS

1. Wejdź w Ustawienia.
2. Wybierz Ekran i jasność.
3. Włącz lub wyłącz tryb ciemny.

Podsumowanie

Tryb ciemny realnie podnosi komfort użytkowników, więc dodanie go do aplikacji to plus, którego nie warto lekceważyć.

Jeśli szukasz kolejnych artykułów o JavaScripcie i innych sztuczek, zajrzyj do moich artykułów o JavaScripcie.