Zapytanie medialne prefers-color-scheme
Wykryj preferowany przez użytkownika systemowy tryb ciemny lub jasny za pomocą zapytania medialnego prefers-color-scheme.
Zapytanie medialne prefers-color-scheme to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Dlaczego automatyczny tryb ciemny?
Wielu użytkowników włącza tryb ciemny na poziomie systemu operacyjnego ze względu na wygodę, czas pracy baterii (ekrany OLED) lub dostępność. Zapytanie medialne prefers-color-scheme wykrywa tę preferencję i pozwala witrynie automatycznie się dostosować.
Wartości zapytania
Dwie wartości:
light— użytkownik preferuje jasny schemat kolorów (lub nie ma preferencji)dark— użytkownik preferuje tryb ciemny
<p>This page respects your OS dark mode setting.</p>
Ciemny styl mobile-first
Jeśli większość użytkowników korzysta z mobilnych urządzeń OLED, warto rozważyć ustawienie trybu ciemnego jako stylu bazowego:
<p>Dark by default; switches to light in light mode.</p>
Podejście oparte na zmiennych CSS
Najbardziej przejrzysta implementacja polega na zdefiniowaniu zestawu tokenów dla każdego schematu:
<div class="card">Themed card using CSS variables</div>
Obrazy w trybie ciemnym
Aby uniknąć oślepiających obrazów, należy zmniejszyć ich jasność w trybie ciemnym:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='200' height='120' fill='%23ff6347'/></svg>" alt="demo" />
Wykrywanie w JavaScript
Preferencje dotyczące trybu ciemnego można sprawdzać w JavaScript, aby uzyskać dynamiczne działanie:
<p id="theme-status">Checking...</p>
<script>
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.getElementById('theme-status').textContent = isDark ? 'System is in DARK mode' : 'System is in LIGHT mode';
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
document.getElementById('theme-status').textContent = e.matches ? 'System is in DARK mode' : 'System is in LIGHT mode';
});
</script>
Testowanie w DevTools
W Chrome DevTools → karta Rendering → Emulate CSS prefers-color-scheme. Można przełączać się między trybem jasnym i ciemnym bez zmiany ustawień systemu operacyjnego. W Firefoksie: DevTools → karta Inspector → menu ikony oka.
Zasady doboru kolorów w trybie ciemnym
Skuteczny tryb ciemny:
- Używa ciemnoszarego, a nie idealnie czarnego tła — zmniejsza to zmęczenie oczu
- Ogranicza cienie sugerujące uniesienie — dla wyżej położonych powierzchni używa jaśniejszych odcieni tła
- Dostosowuje kolory obramowań, rozjaśniając je w celu zwiększenia widoczności
- Sprawdza współczynniki kontrastu tekstu — mogą być potrzebne inne współczynniki
Antywzorzec odwracania kolorów
Nigdy nie należy po prostu odwracać wszystkich kolorów za pomocą filter: invert(1) w celu utworzenia trybu ciemnego. Obrazy i ikony przyjmują wtedy dziwaczne kolory. Należy używać właściwych tokenów trybu ciemnego z odpowiednimi kolorami dla poszczególnych elementów.
Wydajność: unikanie mignięcia
Jeśli przełączanie motywu jest sterowane przez JavaScript, należy zapobiec mignięciu niestylowanego motywu (FOUT), stosując klasę motywu synchronicznie do <html> w tagu <script> umieszczonym w <head>, zanim strona zostanie wyrenderowana.
Kolor motywu w metadanych
Należy zaktualizować kolor elementów interfejsu przeglądarki (mobilnego paska adresu i przełącznika zadań), aby pasował do ciemnego motywu:
<pre class="code-sample"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1a2e"></pre>
Szybkie sprawdzenie
Jakiej wartości zapytania medialnego należy użyć, aby zastosować style trybu ciemnego, gdy system operacyjny jest ustawiony na tryb ciemny?
Podsumowanie
prefers-color-scheme: dark wykrywa preferencję systemu operacyjnego dotyczącą trybu ciemnego. Automatyczny tryb ciemny należy zaimplementować za pomocą zmiennych CSS, które zamieniają wartości tokenów wewnątrz zapytania medialnego. W trybie ciemnym należy zmniejszyć jasność obrazów. Należy testować rozwiązanie w DevTools i zaktualizować metatag browser theme-color, aby zapewnić pełne doświadczenie na urządzeniach mobilnych.
Często zadawane pytania
Czy lekcja „Zapytanie medialne prefers-color-scheme” jest bezpłatna?
Tak — pełny tekst „Zapytanie medialne prefers-color-scheme” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Zapytanie medialne prefers-color-scheme”?
Wykryj preferowany przez użytkownika systemowy tryb ciemny lub jasny za pomocą zapytania medialnego prefers-color-scheme. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Zapytanie medialne prefers-color-scheme”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Zapytanie medialne prefers-color-scheme
- Zmienne CSS do obsługi motywów
- Właściwość color-scheme
- Automatyczne i ręczne przełączanie trybu ciemnego