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 and shadcn/ui's dark mode.

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.

globals.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 */
  }
}

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.

layout.tsx
// above code
        <ThemeProvider
          attribute="class"
          defaultTheme="dark" // "dark" | "light" | "system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
// rest of the code

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

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

PreviousMultiple FontsNextLinting & Formatting

Last updated