\r `}),(0,n.jsx)(e.span,{className:"code-line",children:` \r `}),(0,n.jsx)(e.span,{className:"code-line",children:` \r `}),(0,n.jsx)(e.span,{className:"code-line",children:` \r `}),(0,n.jsx)(e.span,{className:"code-line",children:` );\r `}),(0,n.jsx)(e.span,{className:"code-line",children:` }\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`}\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`export default MyDocument; `})]})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)("h2",{className:"dark:text-white",children:"3. next-themes \uD328\uD0A4\uC9C0 \uC0AC\uC6A9"}),` `,(0,n.jsxs)(e.p,{children:['_document\uD30C\uC77C\uC758 Html \uD0DC\uADF8\uC758 className\uC744 "light"\uC640',(0,n.jsx)(e.br,{}),` `,'"dark"\uB85C \uBC14\uAFD4\uC8FC\uB294 \uD328\uD0A4\uC9C0\uAC00 \uC788\uC2B5\uB2C8\uB2E4. next-themes\uB77C\uB294 \uC774\uB984\uC774\uC8E0']}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"code-highlight",children:(0,n.jsx)(e.span,{className:"code-line",children:`npm install next-themes `})})}),` `,(0,n.jsxs)(e.p,{children:["next-themes \uD328\uD0A4\uC9C0 \uC801\uC6A9 \uBC29\uBC95\uC744 \uC54C\uC544\uBCF4\uACA0\uC2B5\uB2C8\uB2E4.",(0,n.jsx)(e.br,{}),` `,"\uBA3C\uC800 _app.tsx\uD30C\uC77C\uC744 \uB2E4\uC74C\uACFC \uAC19\uC774 \uC218\uC815\uD569\uB2C8\uB2E4."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"code-highlight",children:[(0,n.jsx)(e.span,{className:"code-line",children:`// _app.tsx\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`import "tailwindcss/tailwind.css";\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`import "~/styles/globals.css";\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`import { ThemeProvider }from "next-themes";\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`functionMyApp({ Component, pageProps }) {\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`return (\r `}),(0,n.jsx)(e.span,{className:"code-line",children:` \r `}),(0,n.jsx)(e.span,{className:"code-line",children:` \r `}),(0,n.jsx)(e.span,{className:"code-line",children:` \r `}),(0,n.jsx)(e.span,{className:"code-line",children:` );\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`}\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`exportdefault MyApp; `})]})}),` `,(0,n.jsx)(e.p,{children:'ThemeProvider\uB97C attribute\uB97C "class"\uB85C \uC9C0\uC815\uD574\uC11C \uCD94\uAC00\uD588\uC2B5\uB2C8\uB2E4.'}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)("h2",{className:"dark:text-white",children:"4. \uB2E4\uD06C \uBAA8\uB4DC\uB85C \uC804\uD658 \uBC84\uD2BC \uCD94\uAC00"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"code-highlight",children:[(0,n.jsx)(e.span,{className:"code-line",children:`// Nav.tsx\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`..\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`const { theme, setTheme } = useTheme();\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`..\r `}),(0,n.jsx)(e.span,{className:"code-line",children:` setTheme(theme === "dark" ? "light" : "dark")}\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`// \uD074\uB9AD\uC2DC \uB2E4\uD06C\uBAA8\uB4DC\uBA74 \uB77C\uC774\uD2B8\uB85C \uBC14\uAFC8\r `}),(0,n.jsx)(e.span,{className:"code-line",children:" className={`mr-3 animate-pulse`}\r\n"}),(0,n.jsx)(e.span,{className:"code-line",children:`>\r `}),(0,n.jsx)(e.span,{className:"code-line",children:` {theme === "light" ? (\r `}),(0,n.jsx)(e.span,{className:"code-line",children:` \r `}),(0,n.jsx)(e.span,{className:"code-line",children:` ) : (\r `}),(0,n.jsx)(e.span,{className:"code-line",children:` \r `}),(0,n.jsx)(e.span,{className:"code-line",children:` )}\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`..\r `}),(0,n.jsx)(e.span,{className:"code-line",children:`.. `})]})}),` `,(0,n.jsxs)(e.p,{children:["\uC774\uB807\uAC8C \uD558\uBA74 next-themes \uD328\uD0A4\uC9C0\uAC00 \uC790\uB3D9\uC73C\uB85C _documents.tsx \uD30C\uC77C\uC758",(0,n.jsx)(e.br,{}),` `,'Html \uD0DC\uADF8\uC5D0\uC11C className\uC744 "light"\uC640 "dark"\uB85C \uBC14\uAFD4\uC8FC\uAC8C \uB418\uB294 \uAC70\uC8E0.']}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)("h2",{className:"dark:text-white",children:"5. \uC644\uC131!"}),` `,(0,n.jsx)("img",{src:"/next/next-darkmode/darkmode.gif",className:"max-w-full h-auto"}),` `,(0,n.jsx)(e.p,{children:`\uD604\uC7AC \uC774 \uBE14\uB85C\uADF8\uC758 nav\uB97C \uBCF4\uC2DC\uBA74 \uD574 or \uB2EC img\uAC00 \uC788\uC2B5\uB2C8\uB2E4. \uD574\uB2F9 \uC774\uBBF8\uC9C0\uB97C \uD074\uB9AD\uD558\uBA74\r \uB77C\uC774\uD2B8\uBAA8\uB4DC\uC640 \uB2E4\uD06C\uBAA8\uB4DC\uB97C \uC804\uD658\uD560\uC218 \uC788\uC2B5\uB2C8\uB2E4.`})]})}function f(s={}){let{wrapper:e}=s.components||{};return e?(0,n.jsx)(e,Object.assign({},s,{children:(0,n.jsx)(h,s)})):h(s)}var j=f;return k(_);})(); ;return Component;