diff --git a/package-lock.json b/package-lock.json
index 798766a..179d3c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
"clsx": "^2.1.1",
"framer-motion": "^11.11.9",
"next": "^14.2.13",
+ "next-themes": "^0.4.6",
"react": "^18",
"react-dom": "^18",
"react-icons": "^5.3.0"
@@ -4684,6 +4685,16 @@
}
}
},
+ "node_modules/next-themes": {
+ "version": "0.4.6",
+ "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+ "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+ "license": "MIT",
+ "peerDependencies": {
+ "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+ }
+ },
"node_modules/next/node_modules/@swc/helpers": {
"version": "0.5.5",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
diff --git a/package.json b/package.json
index 311d8c0..5189f8a 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
"clsx": "^2.1.1",
"framer-motion": "^11.11.9",
"next": "^14.2.13",
+ "next-themes": "^0.4.6",
"react": "^18",
"react-dom": "^18",
"react-icons": "^5.3.0"
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c049c01..647fbb3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import Footer from '@/components/Footer'
import { siteDetails } from '@/data/siteDetails'
import './globals.css'
+import { ThemeProvider } from "@/components/Theme/ThemeProvider";
const manrope = Manrope({ subsets: ['latin'] })
const sourceSans = Source_Sans_3({ subsets: ['latin'] })
@@ -78,9 +79,13 @@ export default function RootLayout({
{siteDetails.googleAnalyticsId && }
-
- {children}
-
+
+
+
+ {children}
+
+
+
)
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index f4ae862..e0a5658 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -8,6 +8,7 @@ import Container from './Container'
import { siteDetails } from '@/data/siteDetails'
import { menuItems } from '@/data/menuItems'
import Image from 'next/image'
+import { ThemeToggle } from '@/components/Theme/ThemeToggle';
const Header: React.FC = () => {
const [isOpen, setIsOpen] = useState(false)
@@ -51,6 +52,9 @@ const Header: React.FC = () => {
Download
+
+
+
{/* Mobile Menu Button */}
diff --git a/src/components/Theme/ThemeProvider.tsx b/src/components/Theme/ThemeProvider.tsx
new file mode 100644
index 0000000..2a52cd4
--- /dev/null
+++ b/src/components/Theme/ThemeProvider.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import * as React from "react";
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Theme/ThemeToggle.tsx b/src/components/Theme/ThemeToggle.tsx
new file mode 100644
index 0000000..519bfbb
--- /dev/null
+++ b/src/components/Theme/ThemeToggle.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import React from "react";
+import { HiOutlineSun, HiOutlineMoon } from "react-icons/hi2";
+
+export function ThemeToggle() {
+ const { theme, setTheme, resolvedTheme } = useTheme();
+ const [mounted, setMounted] = React.useState(false);
+
+ React.useEffect(() => setMounted(true), []);
+
+ const isDark = (theme ?? resolvedTheme) === "dark";
+
+ if (!mounted) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3b4ae69..07c1968 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +1,7 @@
import type { Config } from 'tailwindcss'
const config: Config = {
+ darkMode: "class",
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',