ThemeSwatch
An editor theme drawn as a little editor in its colours, with its name. With onPress it is a toggle for a grid of themes; without it a static preview.
- ThemeSwatch
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, ThemeSwatch
Dark theme, ThemeSwatch
High contrast theme, ThemeSwatch
UsageLink to the section Usage
import { ThemeSwatch } from '@skribly/ui/ops'<ThemeSwatch name={theme.label} colors={theme.preview} meta={<Badge size="sm">{t(`source.${theme.source}`)}</Badge>}
onPress={() => pick(theme)} isSelected={theme.id === active} selectedLabel={t('themes.selected')} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- A toggle button named by its visible text, the theme name first, pressed when chosen; the choice also shows as an accent border, a ring, a check and a word, and a thick system border in forced colours.
- The sketch is hidden from screen readers and keeps its colours in forced colours, as it is a picture of the theme.
- It lifts on hover only when motion is allowed.
This demo runs through axe in all three themes on every test run. See what the tests check.