nualt-theme-toggle
v0.1.1
Published
A dev-only theme toggle for Next.js projects.
Maintainers
thomas_nualtReadme
nualt-theme-toggle
A dev-only theme toggle for Next.js projects.
It lets you force light or dark mode while building a page, without opening Chrome DevTools or changing the OS theme.
Quick Start
From a Next.js App Router project:
pnpm dlx nualt-theme-toggle initor:
npx nualt-theme-toggle initThe initializer:
- installs
nualt-theme-toggleif it is missing - imports
nualt-theme-toggle/styles.css - renders
<ThemeToggle />inapp/layoutorsrc/app/layout - adds the Tailwind v4 class-based dark variant
- adds
:root.light/:root.darkoverrides when the default Next theme variables are present
Then run your dev server, press t to switch theme, and press Shift+H to hide or show the floating button.
pnpm devManual Usage
import { ThemeToggle } from "nualt-theme-toggle";
import "nualt-theme-toggle/styles.css";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<ThemeToggle />
</body>
</html>
);
}For Tailwind v4, your global CSS must include:
@custom-variant dark (&:where(.dark, .dark *));If your app uses the default Next variables from create-next-app, keep system mode as the default and add forced overrides:
:root.light {
--background: #ffffff;
--foreground: #171717;
}
:root.dark {
--background: #0a0a0a;
--foreground: #ededed;
}The init command does this for the default template.
API
type ThemeToggleProps = {
buttonClassName?: string;
className?: string;
enabledInProduction?: boolean;
labels?: {
light?: string;
dark?: string;
};
shortcut?: string | false;
showFloatingButton?: boolean;
visibilityShortcut?: string | false;
};Defaults:
- dev-only
- shortcut:
t - visibility shortcut:
Shift+H - root classes:
html.light/html.dark - no localStorage persistence
- system preference stays active until you force a mode
License
MIT