Command Palette

Search for a command to run...

—

Dark Mode

A lightweight, dependency-free theme system for React. Add it once to your application and control light or dark mode from anywhere.

No dependenciesPersistent preferenceSystem preference
Overview

How it works

The theme provider keeps track of the active theme and synchronizes it with your document. Once it is added to your layout, any client component inside the provider can control the theme.

01
1

Create the provider

Add the theme logic to a reusableThemeProvidercomponent.

02
2

Wrap your application

Add the provider once inside yourlayout.tsxfile.

03
3

Add this line in your globals.css

@custom-variant dark (&:is(.dark *));
04
4

Control it anywhere

UsesetTheme()from any component inside the provider.

01

Create ThemeProvider.tsx

Create the provider that manages the active theme, persists the user's preference, and applies the theme class to the document root.

Components
ThemeProvider.tsx
Select a file to view its code
Theme state

Keeps track of whether the application is currently using light or dark mode.

Persistence

Stores the selected theme so the preference can be restored when the user returns.

Document class

Automatically adds or removes the dark class when the theme changes.

System preference

The provider can fall back to the user's operating-system theme when no preference is stored.

02

Add it to your layout.tsx

Wrap your application with ThemeProvider once. Every component inside it can then access and control the current theme.

app
Layout.tsx
Select a file to view its code
Note

You only need to add the provider once. There is no need to initialize the theme again on individual pages or components.

03

Add it to your globals.tsx

Add this custom-variant into your globals file

@custom-variant dark (&:is(.dark *));
04

Control the theme from anywhere

Access the theme API from any client component inside the provider. Set a specific theme or build your own toggle UI.

app
ThemeButton.tsx
Select a file to view its code
Interactive example

Build your own theme control

The theme API is intentionally small. Use setTheme() to build a switcher that matches your application's design.

Components
DarkLightMode.tsx
Select a file to view its code
Reference

Theme API

The provider exposes a small API for reading and changing the active theme.

API
Description
theme
Returns the currently active theme.
setTheme("dark")
Switches the application to dark mode.
setTheme("light")
Switches the application to light mode.
Usage

Use dark mode in your components

Once the provider is configured, you can use Tailwind's standard dark: variant normally.

Example.tsxTailwind
<div
    className="
        bg-white
        text-black
        dark:bg-black
        dark:text-white
    "
>
    Hello, world.
</div>

The provider does not control your component styles. It simply manages the theme state and document class, allowing your existing dark: styles to respond automatically.

Done

That's all you need.

Create the provider, add it to your layout, and control the theme wherever you need it. No external theme library is required.