Trzy motywyLink do sekcji Trzy motywy
Dzień
Warning: Two people are editing this page
Noc
Warning: Two people are editing this page
Wysoki kontrast
Warning: Two people are editing this page
Dzień to ciepły papier z bursztynowym akcentem. Noc zachowuje ciepło z jaśniejszym bursztynem. Wysoki kontrast to czerń z białymi liniami i żółtym akcentem, dla słabego wzroku i jasnego słońca; tekst osiąga 7:1, a ramki kontrolek 4,5:1.
Jak wybierany jest motywLink do sekcji Jak wybierany jest motyw
Ustaw data-theme na light, dark albo contrast na elemencie głównym. Bez atrybutu decyduje system operacyjny: prefers-contrast: more daje wysoki kontrast, a potem prefers-color-scheme: dark daje motyw nocny. Atrybut działa też na dowolnym elemencie, co nadaje motyw tylko tej części strony, tak jak robią to podglądy na tej stronie.
<html data-theme="dark">
…
<aside data-theme="contrast">Only this panel is high contrast</aside>
</html>W Reakcie
ThemeProvider zapamiętuje wybór czytelnika w pamięci lokalnej i ustawia atrybut. ThemeScript stosuje zapisany wybór przed pierwszym wyrenderowaniem. ThemeToggle to kontrolka, jako grupa segmentowa albo menu.
<ThemeProvider>
<ThemeToggle
label={t('theme')}
variant="menu"
options={{ light: t('light'), dark: t('dark'), contrast: t('contrast'), system: t('system') }}
/>
</ThemeProvider>Z Tailwindem
Komponenty nigdy nie potrzebują dark:. Kod aplikacji, który go potrzebuje, dostaje wariant podążający za atrybutem, zarówno dla motywu nocnego, jak i wysokiego kontrastu, więc aplikacja, która go używa, ustawia atrybut jawnie.
Kontrast w każdym motywieLink do sekcji Kontrast w każdym motywie
Obliczone z wartości tokenów. Testy sprawdzają te pary i więcej: 4,5:1 dla tekstu i 3:1 dla ramek kontrolek i fokusa w motywie dziennym i nocnym, 7:1 i 4,5:1 w wysokim kontraście.
| Para | Dzień | Noc | Wysoki kontrast |
|---|---|---|---|
| Tekst na stroniefg na bg | 17.66:1AAA | 15.87:1AAA | 21.00:1AAA |
| Tekst drugorzędny na stroniemuted na bg | 5.76:1AA | 7.15:1AAA | 16.83:1AAA |
| Tekst drugorzędny na karciemuted na surface | 5.86:1AA | 6.77:1AA | 16.83:1AAA |
| Tekst w kolorze akcentu na stronieaccent-text na bg | 6.97:1AA | 10.35:1AAA | 14.88:1AAA |
| Tekst na głównym przyciskuaccent-fg na accent | 5.02:1AA | 10.00:1AAA | 14.88:1AAA |
| Tekst sukcesu na swoim podbarwieniuok na ok-soft | 5.02:1AA | 7.53:1AAA | 10.96:1AAA |
| Tekst informacji na swoim podbarwieniuinfo na info-soft | 5.77:1AA | 6.70:1AA | 9.88:1AAA |
| Tekst ostrzeżenia na swoim podbarwieniuwarn na warn-soft | 5.56:1AA | 8.29:1AAA | 10.82:1AAA |
| Tekst błędu na swoim podbarwieniudanger na danger-soft | 5.75:1AA | 5.92:1AA | 7.67:1AAA |
| Tekst w ciemnym panelu bocznymnav-fg na nav | 12.59:1AAA | 13.73:1AAA | 21.00:1AAA |
| Ramka kontrolki na karcieborder-strong na surface | 3.80:1AA, elementy nietekstowe | 3.64:1AA, elementy nietekstowe | 21.00:1AA, elementy nietekstowe |
| Obwódka fokusa na stroniefocus na bg | 4.94:1AA, elementy nietekstowe | 10.35:1AA, elementy nietekstowe | 14.88:1AA, elementy nietekstowe |
GęstośćLink do sekcji Gęstość
data-density="compact" daje mniejsze kontrolki aplikacji desktopowych. Zmienia tylko wysokości kontrolek, więc tekst pozostaje czytelny, a zwarte rozmiary nadal spełniają rozmiar celu 24 px. Przełącznik gęstości na górze tej strony ustawia to dla całej strony.
Ustawienia czytelnikaLink do sekcji Ustawienia czytelnika
Dwie klasy na elemencie głównym niosą ustawienia czytelnika aplikacji. a11y-reduce-motion zatrzymuje ruch tak jak ustawienie systemowe, a a11y-strong-focus rysuje obwódkę fokusa o grubości 3 px. Zarządzają nimi AccessibilityProvider i AccessibilitySettings z grupy theme, razem z rozmiarem tekstu i podkreślonymi linkami.