Palette

A guide to customizing the palette of your theme.

Tailus UI Html is built on top of Tailwind Css, which means that you can customize the colors of your theme by changing the colors in the tailwind.config.js file.

Semantic Naming

Our color system uses semantic color names to make it intuitive to understand the purpose of each color. For instance, primary is used for primary actions, success for success notifications, danger for error alerts, and so on. This approach simplifies the process of customizing and maintaining your application’s color palette.

Required Colors

For the theme to function properly, certain colors are necessary. Each color should have shades ranging from 50 to 950. However, the gray color is an exception and must include an additional 925 shade.

Brand

Primary

Secondary

Accent

Feedback

Success

Danger

Warning

Info

Neutral

Gray

Default Palettes

Tailus UI HTML comes with nine pre-configured color palettes for a quick start. To use these default palettes, you need to import the palettes object.

import { palettes } from "@tailus/themer-plugins"

The available palettes are as follows:

trust

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: palettes.trust,
    }
}

oz

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: palettes.oz,
    }
}

mystery

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: palettes.mystery,
    }
}

romance

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: palettes.romance,
    }
}

passion

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: palettes.passion,
    }
}

energy

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: palettes.energy,
    }
}

spring

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: palettes.spring,
    }
}

nature

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: palettes.nature,
    }
}

winter

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: palettes.winter,
    }
}

Override default palettes

If you want to override a color in a palette, you can simply replace it with a new color. This new color can be from Tailwind’s default colors or your own custom colors.

For instance, in the oz palette, indigo is the primary color. If you wish to change this primary color to purple, you can use the spread operator to merge the existing oz palette with your new color. This way, all the original colors are preserved, and the primary color is replaced with purple.

theme : {
    extend : {
        colors: ({colors}) => ({
            ...palettes.oz,
            primary: colors.purple,
        })
    }
},

If you wish to replace a gray color with a default gray color from Tailwind CSS, we recommend using the grays from @tailus/themer-plugins . This is because it includes a 925 shade, providing a wider range of shades.

import { grays } from "@tailus/themer-plugins"
theme : {
    extend : {
        colors: ({colors}) => ({
            ...palettes.oz,
            primary: colors.purple,
            gray: grays.slate,
        })
    }
},

Using Css variables

Please read the Tailwind Css documentation to learn more about how to define your colors as css variables