Theming

Learn how to configure your theme

To configure your theme, you’ll need to use Tailwind Css config file, data-attributes and css variables to style the overal UI or specific components.

Palette

Use your own colors or kickstart your project with default tailwindcss colors

module.exports = {
    content: [
        './*.html',
        "./src/**/*.{html,js}"
    ],
    theme: {
        extend: {
            colors: ({ colors }) => ({
                primary : colors.indigo,
                danger : colors.rose,
                warning : colors.yellow,
                success : colors.lime,
                info : colors.blue,
                gray : colors.zinc,
            }),
        }
    }
};

The curated palettes are:

  • trust
  • oz
  • mystery
  • passion
  • energy
  • nature
  • spring
  • winter
  • romance

Learn more about customizing the palette on the Palette page.

Border Radius

Apply the border radius using the data-rounded attribute, preferably on the <html> element.

<html data-rounded="large" >

The data-rounded attribute accepts the following values :

  • none
  • default
  • small
  • medium
  • large
  • xlarge
  • 2xlarge
  • 3xlarge
  • full

Learn more about customizing the border radius on the Rounded page.

Shade

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

<html data-rounded="large" data-shade="900" >

The available shades are:

  • 800
  • 900
  • 925
  • 950
  • glassy

Learn more about customizing the shades on the Shade page.

Padding and Typography

You can adjust the padding and text colors of your components using CSS variables.

Padding variables

Define the padding 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 {
        --card-padding: theme("spacing[6]");
    }
}

Text color variables

Define the text colors 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 {
        --display-text-color: theme(colors.gray.950);
        --title-text-color: var(--display-text-color);
        --caption-text-color: theme(colors.gray.500);
        --body-text-color: theme(colors.gray.700);
        --placeholder-text-color: theme(colors.gray.400);
    }
}

Although you can assign any values to the CSS variables, we suggest using the theme function to access values from the theme object in your tailwind.config.ts file. This approach promotes consistency across your styles.

Dark mode

Setting text colors in dark mode depends on your chosen implementation.

If you’re using the class method (now replaced with selector), create a .dark class and assign the CSS variables there.

@layer base {
    .dark {
        --display-text-color: theme(colors.white);
        --title-text-color: var(--display-text-color);
        --caption-text-color: theme(colors.gray.500);
        --body-text-color: theme(colors.gray.300);
        --placeholder-text-color: theme(colors.gray.600);
    }
}

If you’re using the media method, add the CSS variables within the @media (prefers-color-scheme: dark) block.

@layer base {
    :root {

        // ...colors on light mode

        @media(prefers-color-scheme:dark){
            --display-text-color: theme(colors.white);
            --title-text-color: var(--display-text-color);
            --caption-text-color: theme(colors.gray.500);
            --body-text-color: theme(colors.gray.300);
            --placeholder-text-color: theme(colors.gray.600);
        }
    }
}