Primitive · CLI
Theme Provider
App-level next-themes wrapper. No visible chrome of its own - mount once at the root so ThemeToggle and dark tokens work.
Preview
npx shadcn@latest add @atroui/theme-providerProvider
ThemeProvider is active
Card
Surfaces use design tokens that flip with light / dark.
Muted
Try Light / System / Dark with the toggle.
BrandInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/theme-providerSource lands in your repo. Installation · Registry
Usage
Wrap the app root once with enableSystem so ThemeToggle’s System option follows prefers-color-scheme. Docs already mounts it this way.
tsx
import { ThemeProvider } from "@/components/ui/theme-provider"
import { ThemeToggle } from "@/components/ui/theme-toggle"
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>
// Anywhere under the provider:
<ThemeToggle />Theme Provider