Skip to Content
FrontendBundlesComponentsLayoutMode Toggle

Mode Toggle

A button that cycles between light, dark, and system color modes. Built on next-themes.

Import

import { ModeToggle } from "@phpcreation/frontend-components-react-nextjs-bundle/components/ModeToggle";

Props

No props — renders a single icon button that toggles the theme on click.

Usage

import { ModeToggle } from "@phpcreation/frontend-components-react-nextjs-bundle/components/ModeToggle";
 
// In navbar or header
<nav>
  <Logo />
  <ModeToggle />
  <UserMenu />
</nav>

Setup

Requires next-themes ThemeProvider at the app root:

// app/layout.tsx
import { ThemeProvider } from "next-themes";
 
export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}
Last updated on
Breadcrumb CustomVersion Components