> ## Documentation Index > Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt > Use this file to discover all available pages before exploring further. # Dark Mode > Implement dark mode in your shadcn/ui application with support for Next.js, Vite, Astro, and other frameworks. 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 ```css theme={null} :root { --background: oklch(1 0 0); /* Light mode */ } .dark { --background: oklch(0.145 0 0); /* Dark mode */ } ``` ## Framework Integration ### Next.js For Next.js applications, use the `next-themes` package. ### Install next-themes ```bash theme={null} npm install next-themes ``` ### Create a theme provider ```tsx title="components/theme-provider.tsx" theme={null} "use client" import * as React from "react" import { ThemeProvider as NextThemesProvider } from "next-themes" export function ThemeProvider({ children, ...props }: React.ComponentProps) { return {children} } ``` ### Wrap your root layout Add the `ThemeProvider` to your root layout and add the `suppressHydrationWarning` prop to the `html` tag. ```tsx title="app/layout.tsx" {1,6,9-14} theme={null} import { ThemeProvider } from "@/components/theme-provider" export default function RootLayout({ children }: RootLayoutProps) { return ( <> {children} ) } ``` ### Add a mode toggle Create a component to toggle between light and dark mode: ```tsx title="components/mode-toggle.tsx" theme={null} "use client" import * as React from "react" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}> Light setTheme("dark")}> Dark setTheme("system")}> System ) } ``` ### Vite For Vite applications, create a custom theme provider. ### Create a theme provider ```tsx title="components/theme-provider.tsx" theme={null} import { createContext, useContext, useEffect, useState } from "react" type Theme = "dark" | "light" | "system" type ThemeProviderProps = { children: React.ReactNode defaultTheme?: Theme storageKey?: string } type ThemeProviderState = { theme: Theme setTheme: (theme: Theme) => void } const initialState: ThemeProviderState = { theme: "system", setTheme: () => null, } const ThemeProviderContext = createContext(initialState) export function ThemeProvider({ children, defaultTheme = "system", storageKey = "vite-ui-theme", ...props }: ThemeProviderProps) { const [theme, setTheme] = useState( () => (localStorage.getItem(storageKey) as Theme) || defaultTheme ) useEffect(() => { const root = window.document.documentElement root.classList.remove("light", "dark") if (theme === "system") { const systemTheme = window.matchMedia("(prefers-color-scheme: dark)") .matches ? "dark" : "light" root.classList.add(systemTheme) return } root.classList.add(theme) }, [theme]) const value = { theme, setTheme: (theme: Theme) => { localStorage.setItem(storageKey, theme) setTheme(theme) }, } return ( {children} ) } export const useTheme = () => { const context = useContext(ThemeProviderContext) if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider") return context } ``` ### Wrap your app ```tsx title="App.tsx" {1,5-7} theme={null} import { ThemeProvider } from "@/components/theme-provider" function App() { return ( {children} ) } export default App ``` ### Add a mode toggle ```tsx title="components/mode-toggle.tsx" theme={null} import { Moon, Sun } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { useTheme } from "@/components/theme-provider" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}> Light setTheme("dark")}> Dark setTheme("system")}> System ) } ``` ### Astro For Astro applications, implement theme switching with a client-side script. ### Add the theme script Create a script to handle theme switching in your layout: ```astro title="src/layouts/Layout.astro" theme={null} --- // Your layout frontmatter --- ``` ### Create a theme toggle component ```tsx title="src/components/ThemeToggle.tsx" theme={null} import { useEffect, useState } from "react" import { Moon, Sun } from "lucide-react" export function ThemeToggle() { const [theme, setTheme] = useState<"light" | "dark">("light") useEffect(() => { const isDark = document.documentElement.classList.contains("dark") setTheme(isDark ? "dark" : "light") }, []) const toggleTheme = () => { const newTheme = theme === "light" ? "dark" : "light" document.documentElement.classList.toggle("dark") setTheme(newTheme) } return ( ) } ``` ### Remix For Remix applications, use the remix-themes package. ### Install remix-themes ```bash theme={null} npm install remix-themes ``` ### Configure the theme session ```tsx title="app/sessions.server.tsx" theme={null} import { createThemeSessionResolver } from "remix-themes" export const themeSessionResolver = createThemeSessionResolver( // your session storage here ) ``` ### Update your root layout ```tsx title="app/root.tsx" theme={null} import { ThemeProvider } from "remix-themes" import { themeSessionResolver } from "./sessions.server" export async function loader({ request }: LoaderFunctionArgs) { const { getTheme } = await themeSessionResolver(request) return { theme: getTheme(), } } export default function App() { const data = useLoaderData() return ( {children} ) } ``` ### Add a mode toggle Use the same mode toggle component from the Next.js example, importing `useTheme` from `remix-themes` instead. ## Customizing Dark Mode Colors Customize dark mode colors by modifying the `.dark` selector in your CSS: ```css title="app/globals.css" theme={null} .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); /* Customize other colors */ } ``` 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: ```tsx theme={null} {children} ``` 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 `` tag * The `next-themes` package handles this automatically For other frameworks: * Add an inline script in the `` to set the theme class before rendering * This script should run synchronously before the page renders