Skip to Content
Experience the magic of day and night

Next Theme Switcher

A simple, customizable Theme Switcher component for React projects.

Select a display theme:

Installation

npm install next-theme-switcher

🚀 Usage

Integrate next-theme-switcher by wrapping your app with ThemeProvider and using the ThemeSwitcher component to toggle themes.

Reactlayout.tsx
// next-themes is preinstalled (optional)import { ThemeProvider } from 'next-themes'; // add stylesimport "next-theme-switcher/styles"// ...export default function RootLayout({ children }: Readonly<{  children: React.ReactNode;}>) {  return (    <html lang="en" suppressHydrationWarning>      <body>        <ThemeProvider           attribute="class"           defaultTheme="system"           enableSystem        >          {children}        </ThemeProvider>      </body>    </html>  );}
Reactpage.tsx
import { useTheme } from "next-themes";import { ThemeSwitcher } from "next-theme-switcher";function Page() {  const { theme, setTheme } = useTheme();  return (    <ThemeSwitcher theme={theme} onThemeChange={setTheme} />  );}

✨ Appearance

Customize the appearance of your theme switcher by passing props like size, scale, borderRadius, and gap to the ThemeSwitcher component.

Sizes

Scale (multiplier)

Border Radius (px)

Gap (unit)

Select a display theme:

🗂️ Layout

Control the order of theme options by passing the layout prop to the ThemeSwitcher. This lets you decide how light, dark, and system modes are arranged in the switcher.

system
light
dark
Select a display theme:

🎨 Icons

Customize the appearance of the ThemeSwitcher by passing your own icons for light, dark, and system modes. Each icon should be a React component returning an SVG element.

Select a display theme:

⭐️ Custom

You can override the ThemeSwitcher outer div by providing a className prop.

Select a display theme: