Skip to main content
Shadcn/ui provides built-in support for dark mode through CSS variables. This guide covers implementation for different frameworks.

​
How it Works

Dark mode in shadcn/ui works by:
  1. Adding a .dark class to the root element
  2. Applying different CSS variable values under the .dark selector
  3. Components automatically adapt based on the active theme

​
Framework Integration

​
Next.js

For Next.js applications, use the next-themes package.

​
Customizing Dark Mode Colors

Customize dark mode colors by modifying the .dark selector in your CSS:
app/globals.css
All color variables in the .dark selector override the light mode values when dark mode is active.

​
System Preference

Most theme providers support automatic detection of the user’s system preference:
This will automatically apply dark mode when the user’s OS is set to dark mode.

​
Preventing Flash of Wrong Theme

Always include the theme initialization script before any content renders to prevent a flash of the wrong theme.
For Next.js:
  • Use suppressHydrationWarning on the <html> tag
  • The next-themes package handles this automatically
For other frameworks:
  • Add an inline script in the <head> to set the theme class before rendering
  • This script should run synchronously before the page renders