Dark Mode

The dark appearance follows the .dark class on <html>, the same convention as shadcn/ui.

How it works

macos.css defines the light values on :root and the dark values on .dark. Tailwind’s dark: variant is configured to the same class, so you can also write dark: utilities in your own code.

With next-themes

Wrap your app in a ThemeProvider that sets the class attribute, as in the shadcn/ui guide:

import { ThemeProvider } from "next-themes"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Without a library

To follow the system setting with no flash on load, add a small inline script to <head>. This site uses the same approach:

<script
  dangerouslySetInnerHTML={{
    __html: `try {
  const theme = localStorage.getItem("theme") ?? "system"
  const dark = theme === "dark" || (theme === "system" && matchMedia("(prefers-color-scheme: dark)").matches)
  document.documentElement.classList.toggle("dark", dark)
} catch {}`,
  }}
/>