9
Switch language to العربية

Theme Provider

PreviousNext

Theme provider wrapper component.

;

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [mounted, setMounted] = React.useState(false);

  React.useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return <>{children}</>;
  }

  return (
    <NextThemesProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </NextThemesProvider>
  );
} 

Installation

pnpm dlx codebase add theme-provider

Usage

import { ThemeProvider } from "@/components/atom/theme-provider"
<ThemeProvider />