ThemeToggle

Pozwala czytelnikowi wybrać motyw dzienny, nocny, wysokiego kontrastu albo ustawienie systemu. W ustawieniach użyj formy segmentowej, a w zatłoczonym górnym pasku formy menu.

ThemeToggle

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: ThemeToggle

Top bar

Icons only:

Noc, podgląd: ThemeToggle

Top bar

Icons only:

Wysoki kontrast, podgląd: ThemeToggle

Top bar

Icons only:

UżycieLink do sekcji Użycie

tsx

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

tsx

<ThemeToggle
  label="Theme"
  options={{ light: 'Light', dark: 'Dark', contrast: 'High contrast', system: 'Same as system' }}
/>
<ThemeToggle variant="menu" label="Theme" options={options} descriptions={hints} />

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ść

Forma segmentowa jest grupą przycisków opcji: Tab wchodzi do niej, klawisze strzałek przesuwają, Spacja lub Enter wybiera.
Forma menu to przycisk otwierający menu z pozycjami opcji; Escape zamyka menu i zwraca fokus.
Wybrana opcja pokazuje uniesiony kafelek albo znacznik, nigdy tylko kolor, i pozostaje widoczna w trybie wysokiego kontrastu systemu Windows.
W wąskim kontenerze słowa są ukryte wizualnie, ale zostają w nazwie dostępnej.

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