var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var T=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var n in e)i(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of g(e))!x.call(t,a)&&a!==n&&i(t,a,{get:()=>e[a],enumerable:!(r=u(e,a))||r.enumerable});return t};var y=(t,e,n)=>(n=t!=null?p(f(t)):{},s(e||!t||!t.__esModule?i(n,"default",{value:t,enumerable:!0}):n,t)),b=t=>s(i({},"__esModule",{value:!0}),t);var m=T((N,d)=>{d.exports=_jsx_runtime});var I={};v(I,{default:()=>l,frontmatter:()=>P});var o=y(m()),P={title:"Next.js Theme Integration",description:"Add dark mode to your Next.js application"};function c(t){let e={code:"code",h2:"h2",p:"p",...t.components},{CodeSnippet:n,PackageManagerTabs:r}=e;return n||h("CodeSnippet",!0),r||h("PackageManagerTabs",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h2,{id:"install-next-themes-package",children:"Install next-themes package"}),` `,(0,o.jsxs)(e.p,{children:["Start by installing ",(0,o.jsx)(e.code,{children:"next-themes"}),":"]}),` `,(0,o.jsx)("br",{}),` `,(0,o.jsx)(r,{commands:{pnpm:"pnpm add next-themes",npm:"npm install next-themes",yarn:"yarn add next-themes",bun:"bun add next-themes"}}),` `,(0,o.jsx)(e.h2,{id:"create-a-theme-provider",children:"Create a Theme Provider"}),` `,(0,o.jsx)(n,{code:`import * as React from "react" import { ThemeProvider as NextThemesProvider } from "next-themes" export function ThemeProvider({ children, ...props }: React.ComponentProps) { return {children} } `,title:"components/theme-provider.tsx"}),` `,(0,o.jsx)(e.h2,{id:"wrap-your-root-layout",children:"Wrap your Root Layout"}),` `,(0,o.jsxs)(e.p,{children:["Add the ",(0,o.jsx)(e.code,{children:"ThemeProvider"})," to your root layout and add the ",(0,o.jsx)(e.code,{children:"suppressHydrationWarning"})," prop to the html tag."]}),` `,(0,o.jsx)("br",{}),` `,(0,o.jsx)(n,{code:`import type { Metadata } from "next" import { ThemeProvider } from "@/components/theme-provider" import "./globals.css" export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } `,title:"app/layout.tsx"}),` `,(0,o.jsx)(e.h2,{id:"create-a-theme-toggler",children:"Create a Theme Toggler"}),` `,(0,o.jsx)(n,{title:"components/theme-toggler.tsx",code:`"use client" import { useEffect, useState } from "react" import { Loader2, MoonIcon, SunIcon } from "lucide-react" import { useTheme } from "next-themes" import { Button, IconButton } from "@/components/ui/button" export function ThemeToggler() { // This component is only rendered on the client, so we can use useEffect to set the mounted state // and avoid server-side rendering issues with the theme provider const [mounted, setMounted] = useState(false) const { resolvedTheme, setTheme } = useTheme() const toggleTheme = () => { setTheme(resolvedTheme === "light" ? "dark" : "light") } // useEffect only runs on the client, so now we can safely show the UI useEffect(() => { setMounted(true) }, []) if (!mounted) { return ( ) } return ( {resolvedTheme === "light" ? : } ) } `}),` `,(0,o.jsx)(e.h2,{id:"use-the-theme-toggler",children:"Use the Theme Toggler"}),` `,(0,o.jsx)(n,{title:"components/navigation-bar.tsx",code:`import { ThemeToggler } from "@/components/theme-toggler" export function NavigationBar() { return ( ) } `})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(c,{...t})}):c(t)}function h(t,e){throw new Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(I);})(); ;return Component;