我正在使用上下文来管理跨页面的主题。
NavBar中的按钮负责更改darkMode上下文，该上下文控制index.js中的主题
但是，darkMode变量似乎没有更新，在index.js中仍然为null。
任何帮助是赞赏，谢谢！
Index.js

import Image from 'next/image'
import { Inter } from 'next/font/google'
import { useEffect } from 'react'
import Nav from '@/components/Nav'
import Link from 'next/link'
import { useThemeContext } from '@/components/ThemeProvider'
import ThemeProvider from '@/components/ThemeProvider'

const inter = Inter({ subsets: ['latin'] })
import { AiFillInstagram, AiFillLinkedin, AiFillYoutube } from 'react-icons/ai'


export default function Home() {
  
  const { darkMode } = useThemeContext();

  const instagramLink = '#';
  const linkedInLink = '#';
  const youtubeLink = '#';
  
  //Does not run after pressing nav button
  useEffect(()=>{
    console.log("I changed")
  },[darkMode])
  
  return (
    <ThemeProvider>
      <Nav/>
      <div className={darkMode ? "dark" : "light"}>
        <main className='bg-white px-10 md:px-20 mx-auto dark:bg-gray-900'>

          <section className='py-10'>

            <div className='text-center p-10'>

              <h2 className='text-5xl py-7 text-teal-500 font-medium md:text-6xl'>Name</h2>
              <h3 className='py-5 text-xl md:text-2xl'>Aspiring Developer from XXX</h3>
              <p className='text-md py-5 leading-8 md:text-xl md:leading-8'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Eveniet similique porro tenetur reiciendis corrupti repellat architecto perferendis quisquam quam ab officia aperiam
              </p>

            </div>

            <div className='text-5xl flex justify-center gap-16 align-middle text-gray-600 dark:text-white mb-14'>
              <Link href={instagramLink ?? '#'}>
                <AiFillInstagram />
              </Link>
              <Link href={linkedInLink ?? '#'}>
                <AiFillLinkedin/>
              </Link>
              <Link href={youtubeLink ?? '#'}>
                <AiFillYoutube />
              </Link>
            </div>

            <div className="relative mx-auto w-80 h-80">
              <Image className="block absolute top-8 rounded-full w-80 h-80 object-cover object-right" src={'/static/images/profile.jpg'} alt='Profile Picture' fill />
            </div>

          </section>

          <section className='p-10'>
            <div>
              <h3 className='text-3xl md:text-4xl font-light'>My background</h3>
              <p className='text-md py-5 leading-8 md:text-xl md:leading-8'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet similique porro tenetur reiciendis corrupti repellat architecto perferendis quisquam quam ab officia aperiam eaque dolorum, in laudantium temporibus ipsam assumenda natus molestiae placeat, eius aut minima! Esse similique voluptas officia tempora, nulla magni rerum ut ipsam, maxime dolorem dignissimos quia! Cumque!</p>
            </div>

            <div>
            </div>

          </section>
        </main>
      </div>
    
    </ThemeProvider>
  )
}

Nav.js

import React from 'react'
import {BsFillMoonStarsFill} from 'react-icons/bs'
import Link from 'next/link'
import { useThemeContext } from './ThemeProvider'

export default function Nav() {
  
  const { toggleDarkMode } = useThemeContext();

  return (
    <nav className='flex justify-between p-5  text-black gap-2'>
      <Link href="/">
        <h1 className='text-xl font-burtons bold-text cursor-pointer'>DYLANWAN</h1>
      </Link>
      <ul className='flex items-center'>
        <li>
          <BsFillMoonStarsFill onClick={toggleDarkMode} className='cursor-pointer text-2xl'/>
        </li>
        <li><Link href="/resume" className='bg-cyan-300 px-4 py-2 rounded-lg ml-8 text-gray-800'>Resume</Link></li>
      </ul>
    </nav>
  )
}

ThemeProvider.js

import { createContext, useState, useContext } from 'react'

export const ThemeContext = createContext({darkMode: null, toggleDarkMode: ()=>{}})

export default function ThemeProvider({children}) {
  
  const [darkMode, setDarkMode] = useState(true)
  
  const toggleDarkMode = () => {
    console.log(` I am dark mode inside provider: ${darkMode}`)
    setDarkMode(prevTheme =>!prevTheme)
  }

  const value = {darkMode, toggleDarkMode}
  
  return (

    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
    
  )
}

export const useThemeContext = () => useContext(ThemeContext);