Theme playground

Change a colour and see the effect on the preview. Changes stay on this page. When you are happy, copy the CSS and add it to your app's stylesheet.

Colours

Primary--mui-color-primary

Text on primary--mui-color-primary-text

Surface--mui-color-surface

Raised surface--mui-color-surface-raised

Text--mui-color-text

Muted text--mui-color-text-muted

Border--mui-color-border

Danger--mui-color-danger

Success--mui-color-success

Warning--mui-color-warning

WCAG AA minimums: 4.5:1 for text, 3:1 for boundaries and focus rings.

Text on surface: 17.06:1 passes (needs 4.5:1)
Muted text on surface: 4.55:1 passes (needs 4.5:1)
Text on primary: 5.17:1 passes (needs 4.5:1)
Primary as link text: 4.94:1 passes (needs 4.5:1)
Danger text: 4.62:1 passes (needs 4.5:1)
Success text: 3.15:1 fails (needs 4.5:1)
Border boundary: 1.18:1 fails (needs 3:1)

Primary

Active

Failed

Check your address

The postcode does not match the city.

Oak armchair

In stock. Ships in three to five days.

/* No changes from the default theme. */