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 you'll be asked to choose a color palette from our already defined set of color palettes:

? Which color would you like to use as the brand color?
❯   brand
    error
    warning
    success
    gray
    moss
    green
    teal
  ↓ blue

Manually

If you've already created an Untitled UI project and would like to change the brand color to something else, you can just duplicate one of the pre-defined color palettes and rename it to --color-brand-*:

@theme {
    --color-brand-25: rgb(252 250 255); 
    --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-25: var(--color-rose-25); 
    --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

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 25 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