---
title: Dark Mode
description: Adding dark mode to your site.
---

<Step>

### Wrap your root layout

Add the `ColorModeProvider` and `ColorModeScript` to your app.

```tsx {3-7,13-17,20-22,29-32} title="src/app.tsx"
import { Suspense } from "solid-js"
import { isServer } from "solid-js/web"
import {
  ColorModeProvider,
  ColorModeScript,
  cookieStorageManagerSSR,
} from "@kobalte/core"
import { MetaProvider } from "@solidjs/meta"
import { Router } from "@solidjs/router"
import { FileRoutes } from "@solidjs/start"
import { getCookie } from "vinxi/http"

const getServerCookies = () => {
  "use server"
  const colorMode = getCookie("kb-color-mode")
  return colorMode ? `kb-color-mode=${colorMode}` : ""
}

export default function App() {
  const storageManager = cookieStorageManagerSSR(
    isServer ? getServerCookies() : document.cookie,
  )

  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Suspense>
            <ColorModeScript storageType={storageManager.type} />
            <ColorModeProvider storageManager={storageManager}>
              {props.children}
            </ColorModeProvider>
          </Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  )
}
```

### Add a mode toggle

Place a mode toggle on your site to toggle between light and dark mode.

<ComponentPreview name="mode-toggle">

```tsx file=<rootDir>/apps/docs/src/registry/examples/mode-toggle.tsx

```

</ComponentPreview>

</Step>
