Color utility classes.
Change background or text color to some predefined colors.
General colors are
Theme Colors are
There are gradients. For now it's only four
It also includes several brand colors
It also includes inverted color, which alternates background or text color to dark and light. If you use this color to any element, in light theme the element's color will be dark-grey and in dark theme it will be whitesmoke.
You can set any element's background color just by adding a class. To set any element's background color, add class zust-bg- then the color name.
Example. If You want to set any element's background color to pink, just add class zust-bg-pink.
If you want to set different background color in dark theme, add class zust-bg-color-name@dark.
Example. If you want to set any element's background color to green in dark theme, add class zust-dark-bg-green.
Change the theme!
<button class="zust-btn zust-custom zust-bg-pink zust-bg-green@dark">I am a chameleon</button>Extra colors which are only available as background color are -
light : Use this color to any element to make the element's background color to a lighter color than it's parent's background color.default : Use this color to any element to make the element's background color to default to it's theme.You can set any element's text color just by adding a class. To set any element's text color, add class zust-text- then the color name
Example. If You want to set any element's background color to red, just add class zust-text-red.
If you want to set different text color in dark theme, add class zust-text-color-name@dark.
Example. If you want to set any element's text color to teal in dark theme, add class zust-text-teal@dark.
This is a text
<p class="zust-text-red zust-text-teal@dark">This is a text</p>
pow-primary : Use this color to any element to make the element's text color to strongest/powered text Color.pow-secondary : Use this color to any element to make the element's text color to second strongest/powered text Color.pow-tertiary : Use this color to any element to make the element's text color to third strongest/powered text color.Primary text color. You can See this text's color looks completely strong, more powerful than any other texts. This text color applies to header elements.
Secondary text color. This text's color is not as much powerful as primary text color, but it is powerful than tertiary text color. Weaker than primary text color but stronger than tertiary text color. This text color applies to every child elements of body.
Tertiary text color. As you can notice this text's color is weaker than any other text color. I want more text or the demo will not be that much good, so I tried to write more text. as you can see this is my text. Yay!
<p class="zust-text-pow-primary">Primary text color. You can See this text's color looks completely strong, more powerful than any other texts. This text color applies to header elements.</p>
<p class="zust-text-pow-secondary">Secondary text color. This text's color is not as much powerful as primary text color, but it is powerful than tertiary text color. Weaker than primary text color but stronger than tertiary text color. This text color applies to every child elements of body.</p>
<p class="zust-text-pow-tertiary">Tertiary text color. As you can notice this text's color is weaker than any other text color. I want more text or the demo will not be that much good, so I tried to write more text. as you can see this is my text. Yay!</p>