export const title = "Dark mode"
export const description = "Easily swap between light and dark modes with CSS variables."
export const metaDescription = "Switch between light and dark mode effortlessly with CSS variables. Untitled UI React is the world's largest collection of open-source React components."

import { FeaturedCardEventCTA } from "@/components/application/app-navigation/base-components/featured-cards.demo";
import { DarkModeDemo } from "@/components/application/date-picker/date-picker.demo";

<Divider />

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

```jsx
// [!code word:bg-gray-50 text-gray-900 dark\:bg-gray-950 dark\:text-gray-50]
<p className="bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-50">Hello, world!</p> // [!code --]
// [!code word:bg-primary text-primary]
<p className="bg-primary text-primary">Hello, world!</p> // [!code ++]
```

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

<Divider />

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

<div className="my-8 not-typography w-full">
    <DarkModeDemo />
</div>

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="mt-5">
```ts
// [!code word:dark-mode]
<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>
```
</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](/integrations/nextjs#theme-toggle) or [Vite integration](/integrations/vite#theme-toggle) guides.

<Divider />

<FAQ
    faqs={[
        {
            question: "How do I enable dark mode for my entire application?",
            answer: "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.",
        },
        {
            question: "Can I have both light and dark mode components on the same page?",
            answer: "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.",
        },
        {
            question: "How do I implement a dark mode toggle?",
            answer: "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.\n\nIf you're using Next.js, you can use the `useTheme` from `next-themes` hook to toggle the dark mode.",
        },
        {
            question: "Do I need to write separate styles for dark mode?",
            answer: "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.",
        },
        {
            question: "Does dark mode affect performance?",
            answer: "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.",
        },
        {
            question: "How do I customize dark mode colors?",
            answer: "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.",
        },
    ]}
/>