Colors

Universal UI provides a set of default colors that you can use in your app.

All the default colors provided by Universal UI are listed below. You can also override these colors in the tailwind.config.js, see the Customization page for more information.

It's recommended to use the -theme- classes provided by Universal UI, as they will adapt to the given theme, as well as light / dark mode.

neutral

Pure

bg-theme-pure

Muted

bg-theme-muted

Base

bg-theme-base

Active

bg-theme-active

Inverted

bg-theme-inverted

brand

Pure

bg-theme-pure

Muted

bg-theme-muted

Base

bg-theme-base

Active

bg-theme-active

Inverted

bg-theme-inverted

error

Pure

bg-theme-pure

Muted

bg-theme-muted

Base

bg-theme-base

Active

bg-theme-active

Inverted

bg-theme-inverted

warning

Pure

bg-theme-pure

Muted

bg-theme-muted

Base

bg-theme-base

Active

bg-theme-active

Inverted

bg-theme-inverted

success

Pure

bg-theme-pure

Muted

bg-theme-muted

Base

bg-theme-base

Active

bg-theme-active

Inverted

bg-theme-inverted

info

Pure

bg-theme-pure

Muted

bg-theme-muted

Base

bg-theme-base

Active

bg-theme-active

Inverted

bg-theme-inverted
Previous

Popover

Next

Spacing