---
sidebar_position: 2
---

# Dark Mode

Adding dark mode to your Next.js app, it's a one-time process. We use [next-themes](https://www.npmjs.com/package/next-themes) and [CSS variables](#configure-globalscss) for a seamless dark mode experience.

## Install next-themes

Install [next-themes](https://www.npmjs.com/package/next-themes) by running the following command:

```bash title=Terminal
npm i next-themes
```

## Create a theme provider

Create a theme provider component, **components/theme-provider.tsx**

```tsx theme-provider.tsx
"use client";

import { ThemeProvider as NextThemeProvider } from "next-themes";

export function ThemeProvider({ children }: React.PropsWithChildren<{}>) {
  return (
    <NextThemeProvider
      enableSystem
      defaultTheme="system"
      disableTransitionOnChange
    >
      {children}
    </NextThemeProvider>
  );
}
```

## Wrap your root layout

Add the **ThemeProvider** component to your root layout, **app/layout.tsx**

```tsx layout.tsx
import { ThemeProvider } from "@/components/theme-provider";
import "@/app/globals.css";

export const metadata = {
  title: "App Name",
  description: "Write your app description",
};

export default async function RootLayout({ children }: RootLayoutProps) {
  return (
    <html
      // 💡 Prevent next-themes hydration warning
      suppressHydrationWarning
    >
      <body
        // 💡 Prevent hydration warnings caused by third-party extensions, such as Grammarly.
        suppressHydrationWarning
      >
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}
```

## Add theme-switcher

Add a theme switcher components, **components/theme-switcher.tsx**

```tsx theme-switcher.tsx
"use client";

import React from "react";
import { useTheme } from "next-themes";
import { ActionIcon, DropdownMenu } from "rizzui";
import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";

export function ThemeSwitcher() {
  const { setTheme } = useTheme();

  return (
    <Dropdown>
      <Dropdown.Trigger>
        <ActionIcon variant="outline">
          <SunIcon className="h-5 w-5 dark:hidden" />
          <MoonIcon className="absolute h-5 w-5 hidden dark:block" />
          <span className="sr-only">Toggle theme</span>
        </ActionIcon>
      </Dropdown.Trigger>
      <Dropdown.Menu>
        <Dropdown.Item onClick={() => setTheme("light")}>Light</Dropdown.Item>
        <Dropdown.Item onClick={() => setTheme("dark")}>Dark</Dropdown.Item>
        <Dropdown.Item onClick={() => setTheme("system")}>System</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}
```

## Configure globals.css

We are using rgb formated CSS variables to define our light & dark mode theme. Why we are not using hex code directly? Because opacity modifiers won't work according to the [TailwindCSS documentation](https://tailwindcss.com/docs/customizing-colors#using-css-variables). Please copy and paste this code in to your app style file.

```css title=globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* --------------------------------- */
  /* light theme */
  /* --------------------------------- */
  :root {
    --background: 255 255 255; /* #ffffff */
    --foreground: 72 72 72; /* #484848 */
    --muted: 227 227 227; /* #e3e3e3 */
    --muted-foreground: 146 146 146; /* #929292 */

    /*
    * primary colors
    */
    --primary-lighter: 227 227 227; /* #e3e3e3 */
    --primary-default: 34 34 34; /* #222222 */
    --primary-dark: 0 0 0; /* #000000 */
    --primary-foreground: 255 255 255; /* #ffffff */

    /*
    * secondary colors
    */
    --secondary-lighter: 221 227 255; /* #dde3ff */
    --secondary-default: 78 54 245; /* #4e36f5 */
    --secondary-dark: 67 42 216; /* #432ad8 */
    --secondary-foreground: 255 255 255; /* #ffffff */

    /*
    * danger colors
    */
    --red-lighter: 247 212 214; /* #f7d4d6 */
    --red-default: 238 0 0; /* #e00 */
    --red-dark: 197 0 0; /* #c50000 */

    /*
    * warning colors
    */
    --orange-lighter: 255 239 207; /* #ffefcf */
    --orange-default: 245 166 35; /* #f5a623 */
    --orange-dark: 171 87 10; /* #ab570a */

    /*
    * info colors
    */
    --blue-lighter: 211 229 255; /* #d3e5ff */
    --blue-default: 0 112 243; /* #0070f3 */
    --blue-dark: 7 97 209; /* #0761d1 */

    /*
    * success colors
    */
    --green-lighter: 185 249 207; /* #b9f9cf */
    --green-default: 17 168 73; /* #11a849 */
    --green-dark: 17 132 60; /* #11843c */
  }

  /* --------------------------------- */
  /* dark theme */
  /* --------------------------------- */
  [data-theme="dark"] {
    --background: 8 9 14; /* #08090e */
    --foreground: 223 223 223; /* #dfdfdf */
    --muted: 51 51 51; /* #333333 */
    --muted-foreground: 102 102 102; /* #666666 */

    /*
    * primary colors
    */
    --primary-lighter: 34 34 34; /* #222222 */
    --primary-default: 241 241 241; /* #f1f1f1 */
    --primary-dark: 255 255 255; /* #ffffff */
    --primary-foreground: 0 0 0; /* #000000 */

    /*
    * secondary colors
    */
    --secondary-lighter: 31 22 90; /* #1f165a */
    --secondary-dark: 193 203 255; /* #c1cbff */

    /*
    * danger colors
    */
    --red-lighter: 80 0 0; /* #500000 */
    --red-dark: 255 193 193; /* #ffc1c1 */

    /*
    * warning colors
    */
    --orange-lighter: 68 29 4; /* #441d04 */
    --orange-dark: 252 234 139; /* #fcea8b */

    /*
    * info colors
    */
    --blue-lighter: 13 51 94; /* #0d335e */
    --blue-dark: 181 233 255; /* #b5e9ff */

    /*
    * success colors
    */
    --green-lighter: 3 48 22; /* #033016 */
    --green-dark: 185 249 207; /* #b9f9cf */

    /* here you can customize other colors for dark theme if design required */
  }
}
```

- **Note:** use our theming tools to customize these [CSS variables](/docs/guide/theming#theme-tokens)

## Configure tailwind.config.js

You need to copy and paste the following tailwind configuration in your **tailwind.config.js** file. Check-out their [offical documentation](https://tailwindcss.com/docs/configuration) to configure other things like borderRadius, boxShadow, zIndex, and etc...

```js title=tailwind.config.js
/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    "./node_modules/rizzui/dist/*.{js,ts,jsx,tsx}", // ⚠️ Required this line to compile RizzUI style
    ...// 💡​ configure your components, and any other source files path that contain Tailwind class names.
  ],
  darkMode: ["class", '[data-theme="dark"]'], // ⚠️ Required this line for dark mode implementation
  theme: {
    extend: {
      colors: {
        /*
        * body, modal, drawer background & ring-offset-color
        */
        background: 'rgb(var(--background) / <alpha-value>)',

        /*
        * body text color
        */
        foreground: 'rgb(var(--foreground) / <alpha-value>)',

        /*
        * border, default flat bg color for input components, tab & dropdown hover color
        */
        muted: 'rgb(var(--muted) / <alpha-value>)',

        /*
        * disable foreground color
        */
        'muted-foreground': 'rgb(var(--muted-foreground) / <alpha-value>)',

        /*
        * primary colors
        */
        primary: {
          lighter: "rgb(var(--primary-lighter) / <alpha-value>)",
          DEFAULT: "rgb(var(--primary-default) / <alpha-value>)",
          dark: "rgb(var(--primary-dark) / <alpha-value>)",
          foreground: "rgb(var(--primary-foreground) / <alpha-value>)",
        },

        /*
        * secondary colors
        */
        secondary: {
          lighter: "rgb(var(--secondary-lighter) / <alpha-value>)",
          DEFAULT: "rgb(var(--secondary-default) / <alpha-value>)",
          dark: "rgb(var(--secondary-dark) / <alpha-value>)",
          foreground: "rgb(var(--secondary-foreground) / <alpha-value>)",
        },

        /*
        * danger colors
        */
        red: {
          lighter: "rgb(var(--red-lighter) / <alpha-value>)",
          DEFAULT: "rgb(var(--red-default) / <alpha-value>)",
          dark: "rgb(var(--red-dark) / <alpha-value>)",
        },

        /*
        * warning colors
        */
        orange: {
          lighter: "rgb(var(--orange-lighter) / <alpha-value>)",
          DEFAULT: "rgb(var(--orange-default) / <alpha-value>)",
          dark: "rgb(var(--orange-dark) / <alpha-value>)",
        },

        /*
        * info colors
        */
        blue: {
          lighter: "rgb(var(--blue-lighter) / <alpha-value>)",
          DEFAULT: "rgb(var(--blue-default) / <alpha-value>)",
          dark: "rgb(var(--blue-dark) / <alpha-value>)",
        },

        /*
        * success colors
        */
        green: {
          lighter: "rgb(var(--green-lighter) / <alpha-value>)",
          DEFAULT: "rgb(var(--green-default) / <alpha-value>)",
          dark: "rgb(var(--green-dark) / <alpha-value>)",
        },
      },
      ... // here goes your additional configuration
    },
  },
  plugins: [require("@tailwindcss/forms")], // ⚠️ Required @tailwindcss/forms plugin.
};
```

​🎉​ You are all set to use our components in your application.

## Usage

```tsx
import { Button } from "rizzui";

export default function App() {
  return <Button>Default</Button>;
}
```
