# Dark Mode

## Overview

Dark mode works out of the box in this starter kit. The default theme is **system**. It's based on [next-themes](https://www.npmjs.com/package/next-themes) and [shadcn/ui's dark mode](https://ui.shadcn.com/docs/dark-mode/next).

## How to use

### Styles and theme

The styling is in the `src/app/globals.css` file. All the light mode styling is directly specified `:root` selector while the styles of dark mode are under `.dark` class.

{% code title="globals.css" %}

```css
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    /* light mode styles with variable names */
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 210 40% 98%;
    /* same variable styles but for dark mode */
  }
}
```

{% endcode %}

### Default theme

The default style is **system preference** right now. It can be changed very easily by changing the value of `defaultTheme` prop in `<ThemeProvider>` tag in `src/app/layout.tsx` file.

<pre class="language-tsx" data-title="layout.tsx"><code class="lang-tsx">// above code
        &#x3C;ThemeProvider
          attribute="class"
<strong>          defaultTheme="dark" // "dark" | "light" | "system"
</strong>          enableSystem
          disableTransitionOnChange
        >
          {children}
        &#x3C;/ThemeProvider>
// rest of the code
</code></pre>

### Mode toggle

The starter kit comes with a toggle button as well. It's `src/components/ModeToggle.tsx` file.

To use it, simple import in whatever file you want to show it and use it as a regular component.

I have used it myself in the kit home page, check out for reference: <https://github.com/inclinedadarsh/nextjs-starter/blob/7160b806e22ffbcf166fd4a62f9c8477ecfacde9/src/app/page.tsx#L50C1-L50C25>

```tsx
import { ModeToggle } from '@/components/ModeToggle';

// rest of the code
    <ModeToggle />
//rest of the code
```

### Arbitrary use

If you want to use styles in your components that are not specified in `globals.css`, you can do that using the `dark:` variant of TailwindCSS.

## Other resources

* Custom styles: [custom-styles](https://nextjs-docs.adarshdubey.com/get-started/custom-styles "mention")
* Next Themes: <https://www.npmjs.com/package/next-themes>
* Shadcn/UI's dark mode docs: <https://ui.shadcn.com/docs/dark-mode/next>
* TailwindCSS' dark mode docs: <https://tailwindcss.com/docs/dark-mode>