export const title = "Theming"
export const description = "Learn how to customize our components effortlessly to make them your own."
export const metaDescription = "Learn how to style and customize Untitled UI React components. Untitled UI React is the world's largest collection of open-source React components."


<Divider />

## 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:

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

<Divider />

## 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-*`:

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

<Divider />

<FAQ
    faqs={[
        {
            question: "Can I use custom colors instead of the predefined palettes?",
            answer: "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.",
        },
        {
            question: "How do I change the brand color after initial setup?",
            answer: "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.",
        },
        {
            question: "Do I need to restart my development server after changing the theme?",
            answer: "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.",
        },
        {
            question: "Can I have different themes for different parts of my application?",
            answer: "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.",
        },
        {
            question: "How do theme changes affect dark mode?",
            answer: "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.",
        },
    ]}
/>