Colors

note

If you change the color settings, this doc will be live updated on you local environment for testing purposes

We've simplified color customization in this template by defining three main colors (primary, secondary, emphasis) and some functional ones (info, warning, danger, success).

Name	Usage	Color
Primary	Main theme color
Secondary	Supporting theme color
Emphasis	Highlighted elements
Info	Informational elements
Warning	Warning messages
Danger	Error or critical messages
Success	Success messages

You don't need to deal with different shades, as this is handled automatically.

Lightest	Lighter	Light	Base	Dark	Darker	Darkest

Color Usage Examples

Primary

head1	head2	head3
borders of	this	table

• Side bar details
• Links as this one

Secondary

note

a note with secondary colors

background of text that are inside code format also are secondary

Emphasis

Hover on that beautiful click-to-action button on navigation bar

Danger

danger

Wait! it's dangerous!

Info

info

Something useful to know

Success

tip

Good job!

Warning

caution

Be careful!

Customizing colors

To customize the main and functional colors, modify the following code block in the tailwind.config.ts file. We recommend using this method to ensure good defaults, but if you need more specific control, refer to the advanced customization guides.

/tailwind.config.ts

...
    ...generateColorShades("primary", "#0077ff"),
    ...generateColorShades("secondary", "#fac900"),
    ...generateColorShades("emphasis", "#c24943"),

    ...generateColorShades("warning", "#f6c343"),
    ...generateColorShades("info", "#3296f3"),
    ...generateColorShades("success", "#22c55e"),
    ...generateColorShades("danger", "#d23c3c"),
...