Skip to content
KansoMakado design system 1.1
makado.app

Navigation

BackdropPicker

The color theme picker: swatches that preview each theme (its backdrop with its version of the Makado mark): Makado (the default), Ocean, Mint, Sunset, Lavender, Sand and Ember.

Preview

Live, in this page’s themeOpen on its own

Props

PropTypeDescription
valueRequiredBackdropColor
onChange(color: BackdropColor) => void
imagesPartial<Record<BackdropColor, string>>Each theme's version of the Makado mark, shown on its swatch.
labelstring
classNamestring

Guidelines

The color theme picker: swatches that preview each theme (its backdrop with its version of the Makado mark): Makado (the default), Ocean, Mint, Sunset, Lavender, Sand and Ember.

Provide: value, onChange, images (each theme's mark file), optionally label (default "Color theme").

  • A radio group: one tab stop, arrow keys move the choice. The chosen swatch has a ring and a bold name.
  • The app sets data-backdrop on <html> to the choice (before first paint, from this browser) and saves it to the profile. The theme recolors the accent family, the backdrop and the logo mark.