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.

To enable dark mode for your entire application, add the dark-mode class to your root HTML or body element. This will apply dark mode styles to all components within that container.

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.

You can implement a dark mode toggle by adding or removing the dark-mode class from your root element using JavaScript. You might want to store the user's preference in localStorage to persist it across page loads.

If you're using Next.js, you can use the useTheme from next-themes hook to toggle the dark mode.

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.

Untitled UI's implementation of dark mode has minimal impact on performance since it uses CSS variables rather than duplicating styles. The theme switching is instantaneous.

You can customize dark mode colors by modifying the CSS variables in your theme file. Each color token has both light and dark variants defined in the :root and .dark-mode selectors.

ThemingTypography