add dark mode

SultaniGithub · May 17, 2024 · 0d349f6 · 0d349f6
1 parent 672e0ab
commit 0d349f6
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 2 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import Header from "@/components/header";
+import Provider from "./provider";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
@@ -15,10 +16,13 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
+
     <html lang="en">
       <body className={inter.className}>
+      <Provider>
         <Header/>
         {children}
+        </Provider>
       </body>
     </html>
   );

diff --git a/app/provider.tsx b/app/provider.tsx
@@ -0,0 +1,13 @@
+import { ThemeProvider } from "next-themes";
+import { ReactNode } from "react";
+
+const Provider=({children}:{children:ReactNode})=>{
+    return (
+        <ThemeProvider attribute="class">
+            <div className="text-gray-700 dark:text-gray-200 dark:bg-gray-700 min-h-screen select-none transition-colors duration-300">
+                {children}
+            </div>
+        </ThemeProvider>
+    )
+}
+export default Provider
diff --git a/components/darkModeSwitch.tsx b/components/darkModeSwitch.tsx
@@ -0,0 +1,22 @@
+"use client"
+import { MdDarkMode } from "react-icons/md";
+import { CiDark } from "react-icons/ci";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+const DarkModeSwitch=()=>{
+
+    const {theme,setTheme,systemTheme}=useTheme()
+    const currentTheme= theme=== systemTheme ? 'system': theme
+    const [mounted,setMounted]=useState(false)
+    useEffect(()=>{setMounted(true)})
+
+
+    return(
+        <div>
+           {mounted && (currentTheme==='dark'? <span className="text-xl cursor-pointer hover:text-amber-500"><div onClick={()=>setTheme('light')}><MdDarkMode   /></div></span> : <span className="text-xl cursor-pointer hover:text-amber-500"><div onClick={()=>setTheme('dark')}><CiDark/></div></span>)}
+        </div>
+    )
+}
+
+export default DarkModeSwitch
diff --git a/components/header.tsx b/components/header.tsx
@@ -2,17 +2,21 @@ import Link from "next/link";
 import Menu from "./menu"
 import { AiFillHome } from "react-icons/ai";
 import { BsFillInfoCircleFill } from "react-icons/bs";
+import DarkModeSwitch from "./darkModeSwitch";
 const Header=()=>{
 return (
     <div className="flex justify-between max-w-6xl m-auto p-4">
         <div className="flex gap-4">
             <Menu title="home" address="/" Icon={AiFillHome} />
             <Menu title="about" address="/about" Icon={BsFillInfoCircleFill} />
         </div>
+        <div className="flex items-center gap-2">
+            <DarkModeSwitch/>
         <Link href="/" className="flex gap-1 items-center ">
-            <span className="bg-amber-500 rounded-lg font-bold px-2 py-1">IDMB</span>
+            <span className="text-xl bg-amber-500 rounded-lg font-bold px-2 py-1">IDMB</span>
             <span className="hidden sm:inline">Clone</span>
         </Link>
+        </div>
     </div>
 )
 }

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -16,5 +16,6 @@ const config: Config = {
     },
   },
   plugins: [],
+  darkMode:"class" 
 };
 export default config;
diff --git a/tsconfig.json b/tsconfig.json
@@ -22,5 +22,6 @@
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "components/header.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
+
 }