feat: dark mode add

alsiam · Dec 15, 2023 · a49fd19 · a49fd19
1 parent 782a869
commit a49fd19
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 284 deletions.
diff --git a/package.json b/package.json
@@ -9,16 +9,18 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.0.4",
+    "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.0.4"
+    "react-icons": "^4.12.0"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "14.0.4"
+    "eslint-config-next": "14.0.4",
+    "typescript": "^5"
   }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,7 +3,10 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import "../styles/style.css";
 import "../styles/blue.css";
+import "../styles/theme.css";
 import Sidebar from "@/components/sidebar/sidebar";
+import Providers from "./providers";
+import ThemeSwitch from "@/components/panel/ThemeSwitch";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -20,8 +23,11 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <Sidebar />
-        {children}
+        <Providers>
+          <ThemeSwitch />
+          <Sidebar />
+          {children}
+        </Providers>
       </body>
     </html>
   );

diff --git a/src/app/page.module.css b/src/app/page.module.css
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,9 +1,7 @@
-import Image from 'next/image'
-import styles from './page.module.css'
 
 export default function Home() {
   return (
-    <main className={styles.main}>
+    <main className="">
       <section className="home section" id="home">
         <div className="container">
           <div className="intro">

diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+
+const Providers = ({ children }: { children: React.ReactNode }) => {
+  return <ThemeProvider enableSystem={true}>{children}</ThemeProvider>;
+};
+
+export default Providers;
diff --git a/src/components/panel/ThemeSwitch.tsx b/src/components/panel/ThemeSwitch.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { FaSun, FaMoon } from "react-icons/fa";
+import { useTheme } from "next-themes";
+
+const ThemeSwitch = () => {
+  const { theme, setTheme } = useTheme();
+
+    const toggleTheme = () => {
+      setTheme(theme === "light" ? "dark" : "light");
+    };
+
+
+  return (
+    <div className="theme">
+      <button onClick={toggleTheme}>
+        {theme === "light" ? <FaSun /> : <FaMoon />}
+      </button>
+    </div>
+  );
+};
+ export default ThemeSwitch;