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

Toggle appearance between light and dark modes simply by adding the dark-mode class to any element. This flexible approach lets you mix and match light and dark components within the same container or page.

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="light-mode bg-secondary">
<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>

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! You can selectively apply the dark-mode or light-mode class to specific containers to mix and match component appearances on the same page. This gives you fine-grained control over theming.

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