diff --git a/components/layout.tsx b/app/layout.tsx similarity index 75% rename from components/layout.tsx rename to app/layout.tsx index c8d5dd7..4ed5c08 100644 --- a/components/layout.tsx +++ b/app/layout.tsx @@ -1,5 +1,5 @@ -import Header from "./header"; -import { Providers } from "@/app/providers"; +import Header from "../components/header"; +import Providers from "@/app/providers"; export default function Layout({ children, diff --git a/app/providers.jsx b/app/providers.jsx deleted file mode 100644 index c6519e0..0000000 --- a/app/providers.jsx +++ /dev/null @@ -1,7 +0,0 @@ -'use client' - -import { ThemeProvider } from 'next-themes' - -export function Providers({ children }) { - return {children} -} \ No newline at end of file diff --git a/app/providers.tsx b/app/providers.tsx new file mode 100644 index 0000000..e93dec7 --- /dev/null +++ b/app/providers.tsx @@ -0,0 +1,9 @@ +'use client'; +import { ReactNode, Suspense } from 'react'; +import { ThemeProvider } from './store/ThemeContext'; + +export default function Providers(props: Readonly<{children: ReactNode}>) { + return ( + {props.children} + ) +} diff --git a/app/store/ThemeContext.tsx b/app/store/ThemeContext.tsx new file mode 100644 index 0000000..1489655 --- /dev/null +++ b/app/store/ThemeContext.tsx @@ -0,0 +1,53 @@ +"use client"; +import React, { createContext, useState, useEffect, ReactNode } from 'react'; + +export const ThemeContext = createContext< { theme: string; toggleTheme: () => void; }|null>(null); + +export const ThemeProvider = ({ children }: { + children: ReactNode +}) => { + const [theme, setTheme] = useState(''); + + // Step 2: Toggle theme and save to localStorage + const toggleTheme = () => { + const newTheme = theme === 'dark' ? 'light' : 'dark'; + setTheme(newTheme); + window.localStorage?.setItem('theme', newTheme); + }; + + // Step 3: Effect to update the documentElement based on theme + useEffect(() => { + const root = document.documentElement; + + if (theme === 'dark') { + root.classList.add('dark'); + root.classList.remove('light'); + } else { + root.classList.add('light'); + root.classList.remove('dark'); + } + }, [theme]); + + useEffect(() => { + const savedTheme = window.localStorage?.getItem('theme'); + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + const initialTheme = savedTheme ?? (prefersDark ? 'dark' : 'light'); + setTheme(initialTheme) + + // If the initial theme is not light, apply it to the documentElement immediately + if (initialTheme && initialTheme !== 'light') { + document.documentElement.classList.add(initialTheme); + } + }, []); + if (!theme) { + return null + } + + return ( + + {children} + + ); +}; + +export const useTheme = () => React.useContext(ThemeContext); diff --git a/components/header.tsx b/components/header.tsx index 4cbe6ba..46c00be 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -2,20 +2,19 @@ import Link from 'next/link' import { usePathname } from 'next/navigation' import Image from "next/image"; -import { useTheme } from "next-themes"; +import { useTheme } from "@/app/store/ThemeContext"; export default function Header() { const pathname = usePathname() - const { systemTheme, theme, setTheme } = useTheme(); - const currentTheme = theme === 'system' ? systemTheme : theme; - + const isDarkTheme = useTheme()?.theme === 'dark'; +console.error(useTheme()?.theme) return (