I have implemented a themes package for dark mode and light mode in my project. Despite doing the installation correctly as per the repository instructions, I am encountering an issue.
My expected behavior for the project is:
The webpage should initially load based on the user's system settings. The user should then be able to switch between themes using a toggle button.
However, what is happening in my project is:
While the website loads according to the system settings on the first load, the toggle button and the image element in the navigation bar do not reflect this preference. For instance, if the user's system setting is dark mode upon the first page load, the website loads in dark mode but the navbar image element and toggle button icon show up for light mode without following this setting.
How can I resolve this issue?
import Image from "next/image";
import Link from "next/link";
import React, { useState, useEffect } from "react";
import { AiOutlineClose, AiOutlineMail, AiOutlineMenu } from "react-icons/ai";
import { FaGithub, FaLinkedinIn } from "react-icons/fa";
import { BsFillPersonLinesFill } from "react-icons/bs";
import NavLogo from "../public/assets/navLogo.svg";
import DarkNavLogo from "../public/assets/darkNavLogo.svg";
import { useTheme } from "next-themes";
import ToggleButton from "./ToggleButton";
const Navbar = () => {
const [nav, setNav] = useState(false);
const [shadow, setShadow] = useState(false);
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
const handleNav = () => {
setNav(!nav);
};
useEffect(() => {
const handleShadow = () => {
if (window.scrollY >= 90) {
setShadow(true);
} else {
setShadow(false);
}
};
window.addEventListener("scroll", handleShadow);
}, []);
return (
<div
className={
shadow
? "fixed w-full h-20 shadow-xl z-[100] ease-in-out duration-300 px-4 md:px-8 lg:px-16 bg-jelly-bean-50 dark:bg-jelly-bean-950"
: "fixed w-full h-20 z-[100] px-4 md:px-8 lg:px-16 bg-jelly-bean-50 dark:bg-jelly-bean-950"
}
...
import React, { useState, useEffect } from "react";
import { useTheme } from "next-themes";
import DarkModeIcon from "@mui/icons-material/DarkMode";
import LightModeIcon from "@mui/icons-material/LightMode";
const ToggleButton = () => {
const [mounted, setMounted] = useState(false);
const { theme, setTheme } = useTheme();
useEffect(() => setMounted(true), []);
return (
<button
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
className="transition-all duration-100"
>
{mounted && (theme === "dark" ? <LightModeIcon /> : <DarkModeIcon />)}
</button>
);
};
export default ToggleButton;