ThemeProvider

Przechowuje tryb motywu, zapamiętuje wybór i ustawia data-theme na stronie. Umieść jeden w korzeniu aplikacji; useTheme odczytuje i zmienia tryb z dowolnego komponentu poniżej. scoped nadaje motyw pojedynczemu panelowi, tak jak tutaj.

ThemeProvider

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: ThemeProvider

Chosen: Same as system. On screen: Light.

Noc, podgląd: ThemeProvider

Chosen: Same as system. On screen: Light.

Wysoki kontrast, podgląd: ThemeProvider

Chosen: Same as system. On screen: Light.

UżycieLink do sekcji Użycie

tsx

import { ThemeProvider } from '@skribly/ui/theme'

tsx

<ThemeProvider>
  <App />
</ThemeProvider>

function Status() {
  const { mode, resolvedTheme, setMode } = useTheme()
  return <button onClick={() => setMode('dark')}>{resolvedTheme}</button>
}

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Tryb Jak w systemie podąża za urządzeniem, łącznie z prośbą o większy kontrast.
Zmiana motywu animuje się od wciśniętego przycisku tylko wtedy, gdy ruch jest dozwolony.
Kontrast każdej pary tekstu i kontrolki jest testowany we wszystkich trzech motywach.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.