Themer / theming/shade

Shade

Learn how to set and customize the shade of your theme.

Adjust the background and border colors of your components using the data-shade attribute. This change is more noticeable in dark mode.

Start with importing and adding the shade plugin to your config’s plugins array

import { palettes, rounded, shade } from "@tailus/themer"
theme: {
    extend: {
        colors: palettes.trust,
    }
},
plugins : [
    rounded,
    shade
]
<html data-shade="900" >

Shades

The available shades are:

800

 
<html data-shade="800"" >

900

 
<html data-shade="900"" >

925

 
<html data-shade="925"" >

950

 
<html data-shade="950"" >

glassy

 
<html data-shade="glassy"" >

Adding shade to a specific component

You can add the data-shade attribute to any component to apply a different shade to that specific component.

 
<html data-shade="900" >
    <head> </head>
    <body>
        <main>
            <div className="grid grid-cols-4 gap-3">
                <Card>Theme shade</Card>
                <Card>Theme shade</Card>
                <Card>Theme shade</Card>
                <Card data-shade="800">800</Card>
            </div>
        </main>
    </body>
</html>

Customization

You have the flexibility to modify an existing shade or even bypass the default shades altogether. This can be achieved by assigning new values to the CSS variables that control borders and background colors.

Customizing a shade

Choose a shade to customize, then define its CSS variables within the @layer base block in your CSS file.

@layer base {
    [data-shade="900"] {
        --ui-border-color: theme(colors.gray.200);
        --ui-bg: theme(colors.white/var(--ui-bg-opacity));
        --ui-soft-bg: theme(colors.gray.100);
        --input-bg: theme(colors.gray.200);
        --ui-bg-opacity: 1;
        --overlay-bg: theme(colors.gray.950/0.25);
    }
}

Bypass default shades

Remove the shade plugin in your tailwind.config.ts file. Define the shade CSS variables in your CSS file by assigning them values within the :root selector.

Make sure to place these definitions inside the @layer base block for proper layering.

@layer base {
    :root {
        --ui-border-color: theme(colors.gray.200);
        --ui-bg: theme(colors.white/var(--ui-bg-opacity));
        --ui-soft-bg: theme(colors.gray.100);
        --input-bg: theme(colors.gray.200);
        --ui-bg-opacity: 1;
        --overlay-bg: theme(colors.gray.950/0.25);
    }
}

Read the Dark mode section in the theming guide to learn about customizing shades in dark mode.