我是Next.js的新手，但我相信这不是Next.js的问题。
我似乎使按钮工作的导航栏，但无法找出如何改变整个页面。
该按钮位于导航栏组件上。
已部署的页面版本：Web Page
Github repo：https://github.com/glaucc/project-cyber的
ThemeContext.js文件：

// ThemeContext.js

// ThemeContext.js
// 'use client';

import React, { createContext, useState, useContext } from "react";

const ThemeContext = createContext('light');

export const lightTheme = {
  backgroundColor: "#fff",
  textColor: "#333",
  linkHoverColor: "#555",
};

export const darkTheme = {
  backgroundColor: "#222",
  textColor: "#fff",
  linkHoverColor: "#ddd",
};

const ThemeProvider = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleDarkMode = () => {
    setIsDarkMode((prevMode) => !prevMode);
  };
  console.log(1)
  const theme = isDarkMode ? darkTheme : lightTheme;

  return (
    <ThemeContext.Provider value={{ theme, toggleDarkMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme must be used within a ThemeProvider");
  }
  return context;
};

export { ThemeProvider, useTheme };

字符串
Navbar.js

import React from "react";
import Link from "next/link";
import styled from "styled-components";
import {useTheme, lightTheme, darkTheme}  from "../components/ThemeContext";

import '../styles/navbar.css';

// Styled component for the logo image
const LogoImage = styled.img`
margin-right: 10px; /* Add some spacing between the logo and the "Home" button */
// height: 40px; /* Adjust the height as needed */
`;

const Navbar = () => {

  const { theme, toggleDarkMode } = useTheme();
  // console.log(theme)

  const handleDarkModeToggle = () => {
    console.log("it's working");
    toggleDarkMode();
    console.log(theme)

  };

  return (
    <div className="navbar-container" style={theme}>
      {/* Logo */}
      <Link href="/">
        <a>
          <LogoImage src="/path-to-your-logo-image.png" alt="Logo" />
        </a>
      </Link>

      {/* Home Button */}
      <Link href="/">
        <div className="homebtn nav-item">Home</div>
      </Link>

      {/* Rest of the navigation items */}
      <div className="nav-items">
        <Link href="/learn">
          <div className="nav-item navitemss">Learn</div>
        </Link>
        <Link href="/practice">
          <div className="nav-item navitemss">Practice</div>
        </Link>
        <Link href="/paths">
          <div className="nav-item navitemss">Paths</div>
        </Link>
        <Link href="/login">
          <div className="nav-item navitemss">Login</div>
        </Link>
        <Link href="/signup">
          <div className="nav-item navitemss">Sign Up</div>
        </Link>
        <div className="nav-item navitemss" onClick={handleDarkModeToggle}>
          {theme === lightTheme ? "Light Mode" : "Dark Mode"}
        </div>
      </div>
    </div>
  );
};

export default Navbar;

型
Layout.js

'use client'

import styled, { keyframes } from "styled-components";
import React from "react";
import { createGlobalStyle } from "styled-components";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import '@fortawesome/fontawesome-free/css/all.css';

import { ThemeProvider, useTheme, darkTheme } from "../components/ThemeContext";

// Create a GlobalStyle component to apply the Inter font globally
const GlobalStyle = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

  /* Other global styles or CSS resets can go here */

  /* Apply the Inter font to the body element */
  
  body {
    font-family: 'Inter', sans-serif;
  
  }

  a {
    color: ${(props) => props.theme.textColor};
    text-decoration: none;
  }

  a:hover {
    color: ${(props) => props.theme.linkHoverColor};
  }

  `;
  // background-color: ${(props) => props.theme.backgroundColor};
  // color: ${(props) => props.theme.textColor};

  
const ContentContainer = styled.div`
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
`;

// const inter = Inter({ subsets: ['latin'] })
// className={inter.className}

const RootLayout = ({ children }) => {
  console.log(2)

  const { theme } = useTheme();
  console.log(3)

  return (
    <html lang="en">
      <body>
        <ThemeProvider style={theme}>
          <GlobalStyle />
          <Navbar />
          <ContentContainer>
            {children}
          </ContentContainer>
          <Footer />
        </ThemeProvider>
      </body>
    </html>
  );
};

export default RootLayout;

型
导航栏第42行的Console.log返回以下内容：{backgroundColor：'#222'，textColor：'#fff'，linkHoverColor：'#ddd'}
我试着用ChatGPT找到答案，但还是找不到。