Theming

Learn how to customize our components effortlessly to make them your own.

Via CLI upon project creation

When initializing a new project using the untitledui CLI tool, the init command asks which color palette to use as the brand color:

? Which color would you like to use as the brand color?
❯   brand
    red
    orange
    amber
    yellow
    lime
    green
    ...
    zinc
    neutral
    stone

brand keeps the default purple palette. The other choices are Tailwind's built-in palettes: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral and stone. Picking one points each --color-brand-* variable in your theme.css at the matching Tailwind variable, for example --color-brand-600: var(--color-blue-600);. Nothing else in the theme changes.

You can also pass the choice directly with npx untitledui@latest init --color <name>, or re-open the prompt in an existing project with npx untitledui@latest init --colors-list. Palettes you add to your own theme.css as rgb() values (for example --color-ocean-50 through --color-ocean-950) appear in the prompt as well.

Manually

If you've already created an Untitled UI project and would like to change the brand color to something else, you can point the --color-brand-* variables at one of Tailwind's built-in palettes (or your own rgb() values):

@theme {
    --color-brand-50: rgb(249 245 255); 
    --color-brand-100: rgb(244 235 255); 
    --color-brand-200: rgb(233 215 254); 
    --color-brand-300: rgb(214 187 251); 
    --color-brand-400: rgb(182 146 246); 
    --color-brand-500: rgb(158 119 237); 
    --color-brand-600: rgb(127 86 217); 
    --color-brand-700: rgb(105 65 198); 
    --color-brand-800: rgb(83 56 158); 
    --color-brand-900: rgb(66 48 125); 
    --color-brand-950: rgb(44 28 95); 
    --color-brand-50: var(--color-rose-50); 
    --color-brand-100: var(--color-rose-100); 
    --color-brand-200: var(--color-rose-200); 
    --color-brand-300: var(--color-rose-300); 
    --color-brand-400: var(--color-rose-400); 
    --color-brand-500: var(--color-rose-500); 
    --color-brand-600: var(--color-rose-600); 
    --color-brand-700: var(--color-rose-700); 
    --color-brand-800: var(--color-rose-800); 
    --color-brand-900: var(--color-rose-900); 
    --color-brand-950: var(--color-rose-950); 
}

FAQs

Please refer to our frequently asked questions page for more.

Yes, you can define your own custom color palette by modifying the CSS variables in your theme file. Just make sure to define all the necessary color shades (from 50 to 950) for a consistent look.

You can change the brand color by modifying the --color-brand-* variables in your CSS theme file. You can either use one of our predefined color palettes or define your own custom colors.

In most cases, you don't need to restart your development server. The changes should be applied automatically when you save the CSS file. However, if you're using a build process, you might need to rebuild your project.

Yes, you can create multiple theme files and apply them to different parts of your application using CSS scoping techniques. This allows you to have different color schemes for different sections.

When you change the theme colors, both light and dark mode will be affected. Our theming system is designed to work seamlessly with dark mode, ensuring that your custom colors look good in both modes.

InstallationDark mode