import React, { useState, useEffect } from "react"; import Button from '@mui/material/Button'; import styles from "@/components/_App/ControlPanelModal/DarkAndLightMode.module.css"; const OnlyTopNavbarDark = () => { // Light/Dark Mode const [isDarkMode, setIsDarkMode] = useState(false); useEffect(() => { // Retrieve the user's preference from local storage const storedPreference = localStorage.getItem("topNavbarDarkTheme"); if (storedPreference === "TopNavbarDark") { setIsDarkMode(true); } }, []); const handleToggle = () => { setIsDarkMode(!isDarkMode); }; useEffect(() => { // Update the user's preference in local storage localStorage.setItem("topNavbarDarkTheme", isDarkMode ? "TopNavbarDark" : "light"); // Update the class on the element to apply the selected mode const htmlElement = document.querySelector(".topNavbarDark"); if (isDarkMode) { htmlElement.classList.add("dark"); } else { htmlElement.classList.remove("dark"); } }, [isDarkMode]); return ( <>

Only Top Navbar Dark/Light Mode

); }; export default OnlyTopNavbarDark;