Since Fuse uses Tailwind, all color related utilities such as text-red-50 or bg-indigo-900 are available by default and they can be configured using Tailwind's configuration.

In addition to default Tailwind colors, Fuse also provides utilities that changes depending on the selected theme. These utilities are meant to be used in places where you want to have a theme dependent colors such as buttons, backgrounds or texts.

Primary, Accent & Warn

Fuse provides Primary, Accent and Warn utilities to go with Angular Material theming. These utilities hold variable colors and they change depending on the selected theme color.

Having these utilities allow you to have dynamic theming throughout your application without hard coding any colors. Each of these utilities also have a complementary .text-on-XXX utility to provide a contrasting text color.

Primary
bg-primary text-on-primary
Accent
bg-accent text-on-accent
Warn
bg-warn text-on-warn
Primary 200
bg-primary-200 text-on-primary-200
Accent 300
bg-accent-300 text-on-accent-300
Warn 400
bg-warn-400 text-on-warn-400

You can change the theme from the Settings panel to observe the primary color changing.

These variable colors have different hue values just like a default Tailwind color palette and they are also available for other Tailwind color utilities such as border, ring and etc:

bg-primary-50, text-accent-900, text-on-warn-500, border-primary, ring-warn-600 ...

Text and Background colors

Fuse also provides set of utilities to have consistent text and background colors throughout your application without hard coding any colors. They also allow working with dark variant of the selected theme.

For example, a text node with a .text-secondary class will have a proper lighter color compared to main text color depending on the selected scheme.

Here's the complete list of the available text and background utilities:

.text-default
.text-secondary
.text-hint
.text-disabled
.divider
.bg-card
.bg-default
.bg-dialog
.bg-hover