Dark mode

Easily swap between light and dark modes with CSS variables.

Dark mode support

Untitled UI React components come with native dark mode support out-of-the-box, so there’s no need for separate styles.

<p className="bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-50">Hello, world!</p> 
<p className="bg-primary text-primary">Hello, world!</p>

Dark mode styles are managed via design tokens and CSS variables, not hardcoded in components. This keeps your styles consistent and easy to maintain.

How to switch to dark mode

Switch to dark mode by adding the dark-mode class to any element. Everything inside that element renders in dark mode, so you can have a dark section on an otherwise light page. Only the dark-mode class is defined; there is no light-mode class, so a light island nested inside a dark container needs its own overrides.

If you’re new to working with style variables, there may be a slight learning curve—but once you’re familiar, you’ll gain speed, flexibility, and cleaner code.

<div className="dark-mode bg-secondary">
    <FeaturedCardEventCTA
        title="Join our workshop"
        badge="Live"
        description="Learn how to leverage ChatGPT to supercharge your workflow."
        confirmLabel="Join now!"
    />
</div>

If you're looking for building a dark mode toggle in either Next.js or Vite project, please check out the theme toggle example in our Next.js integration or Vite integration guides.

FAQs

Please refer to our frequently asked questions page for more.

Add the dark-mode class to your <html> element. Every component inside it switches to its dark colors, because theme.css redefines the color variables under the .dark-mode selector.

Yes, as long as the dark parts are nested inside the light parts. Add the dark-mode class to a container and everything inside it switches to dark mode while the rest of the page stays light. There is no light-mode class, so a light container inside a dark one is not supported out of the box; you would need to redefine the color variables for that container yourself.

Add or remove the dark-mode class on your root element. In Next.js, the Next.js guide sets up next-themes with attribute="class" and maps the dark theme to dark-mode, so you switch with setTheme from useTheme. In Vite, the Vite guide includes a ThemeProvider that saves the choice in localStorage and follows the system preference by default.

No, Untitled UI handles dark mode through CSS variables, so you don't need to write separate styles. Just use the semantic color classes (like bg-primary instead of bg-gray-50) and the dark mode styles will be applied automatically.

Yes, but it follows the dark-mode class, not the operating system setting. globals.css redefines it as @custom-variant dark (&:where(.dark-mode, .dark-mode *)), so dark: styles apply only inside an element with the dark-mode class.

Edit the variables in theme.css. The light values live in the @theme block, and the dark values are overrides inside the .dark-mode selector further down the file. Most dark tokens point at the same color scales, so changing --color-brand-* updates both modes.

ThemingTypography