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.

<html data-shade="900" >

Shades

The available shades are:

glassy

 
<html data-shade="glassy" >

800

 
<html data-shade="800" >

900

 
<html data-shade="900" >

925

 
<html data-shade="925" >

950

 
<html data-shade="950" >

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 class="grid grid-cols-4 gap-3">
                <div>Theme shade</div>
                <div>Theme shade</div>
                <div>Theme shade</div>
                <div data-shade="800">800</div>
            </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 modify 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);
        --ui-bg-opacity: 1;
        --overlay-bg: theme(colors.gray.950/0.25);
    }
}

Default shades

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.

Utilities

border
bg
soft bg
overlay
 
<div class="border" >
<div class="bg-ui">
<div class="bg-ui-soft">
<div class="bg-overlay">