0Pricing
CSS Academy · Lekcja

Właściwość color-scheme

Użyj właściwości color-scheme, aby poinformować przeglądarkę, które motywy obsługuje dany element.

Właściwość color-scheme to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 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.

Czym jest color-scheme?

Właściwość color-scheme informuje przeglądarkę, jakie schematy kolorów obsługuje dany element lub strona. Przeglądarka wykorzystuje te informacje do stylizowania własnych elementów interfejsu — pasków przewijania, kontrolek formularzy, pól wyboru i obramowań pól tekstowych — tak aby pasowały do wybranego schematu.

Wartości color-scheme

Akceptowane wartości:

  • normal: element używa domyślnego schematu dokumentu
  • light: element obsługuje tylko jasny schemat
  • dark: element obsługuje tylko ciemny schemat
  • light dark: obsługiwane są oba schematy; przeglądarka wybiera je na podstawie preferencji
  • dark light: preferowany jest schemat ciemny, a jasny jest używany awaryjnie

Elementy interfejsu przeglądarki

Przeglądarka automatycznie stylizuje poniższe elementy zgodnie z właściwością color-scheme:

  • Paski przewijania
  • Pola tekstowe, obszary tekstowe i listy rozwijane
  • Pola wyboru i przyciski opcji
  • Suwaki zakresu
  • Selektory daty i czasu

Ustawianie na elemencie html

Ustawienie color-scheme na elemencie głównym zmienia sposób renderowania systemowych elementów interfejsu na całej stronie:

<input type="checkbox" /> <select><option>A</option><option>B</option></select>

Odpowiednik w postaci metatagu

Można również zadeklarować color-scheme w HTML jako metatag, aby zastosować tę wartość wcześniej, zanim zostaną wczytane style CSS:

<pre class="code-sample">&lt;meta name="color-scheme" content="light dark"&gt;</pre>

Tryb ciemny bez własnych kolorów

Minimalny tryb ciemny polega na ustawieniu color-scheme: dark i pozostawieniu przeglądarce automatycznego obsługiwania elementów formularzy oraz pasków przewijania:

<p>Native form controls and page background adapt to dark automatically.</p>
<input type="text" placeholder="Native input" />

Łączenie z prefers-color-scheme

Należy użyć prefers-color-scheme do wykrywania preferencji i jednocześnie ustawić własne tokeny oraz właściwość color-scheme:

<div class="demo">Themed via variables + color-scheme</div>

Zakres właściwości color-scheme

Właściwość color-scheme można zastosować do określonych elementów, aby utworzyć odizolowane jasne obszary na ciemnej stronie:

<div class="light-widget">Always-light widget<br/><input type="date" /></div>

Wymuszone kolory / wysoki kontrast w Windows

Zapytanie medialne forced-colors wykrywa tryb wysokiego kontrastu systemu Windows. Należy używać właściwości color-scheme i forced-colors razem, aby zapewnić kompleksową obsługę dostępności.

<div class="card">Card respects forced-colors mode</div>

Słowa kluczowe system-color

Gdy wymuszone kolory są aktywne, należy używać słów kluczowych kolorów systemowych CSS, które odpowiadają dostępnej palecie kolorów użytkownika:

<button>System-styled button</button>

Szybkie sprawdzenie

Jakie działanie CSS umożliwia ustawienie color-scheme: dark na elemencie html?

Podsumowanie

color-scheme instruuje przeglądarkę, jak stylizować własne kontrolki interfejsu dla danego elementu lub strony. Należy globalnie używać color-scheme: light dark, aby włączyć automatyczne dostosowywanie natywnych elementów interfejsu. W celu uzyskania kompletnej implementacji trybu ciemnego należy połączyć tę właściwość z własnymi właściwościami CSS. Metatagu należy użyć, aby zastosować ustawienie jeszcze przed wczytaniem CSS.

Często zadawane pytania

Czy lekcja „Właściwość color-scheme” jest bezpłatna?

Tak — pełny tekst „Właściwość 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 „Właściwość color-scheme”?

Użyj właściwości color-scheme, aby poinformować przeglądarkę, które motywy obsługuje dany element. Ć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 3 z 4.

Ile czasu zajmuje lekcja „Właściwość 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

  1. Zapytanie medialne prefers-color-scheme
  2. Zmienne CSS do obsługi motywów
  3. Właściwość color-scheme
  4. Automatyczne i ręczne przełączanie trybu ciemnego
← Powrót do CSS Academy