CHIEFSOFT\ameye
55 lines
1.4 KiB
JavaScript
55 lines
1.4 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import Button from '@mui/material/Button';
|
|
import styles from "@/components/_App/ControlPanelModal/DarkAndLightMode.module.css";
|
|
|
|
const DarkAndLightMode = () => {
|
|
// Light/Dark Mode
|
|
const [isDarkMode, setIsDarkMode] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Retrieve the user's preference from local storage
|
|
const storedPreference = localStorage.getItem("theme");
|
|
if (storedPreference === "dark") {
|
|
setIsDarkMode(true);
|
|
}
|
|
}, []);
|
|
|
|
const handleToggle = () => {
|
|
setIsDarkMode(!isDarkMode);
|
|
};
|
|
|
|
useEffect(() => {
|
|
// Update the user's preference in local storage
|
|
localStorage.setItem("theme", isDarkMode ? "dark" : "light");
|
|
|
|
// Update the class on the <html> element to apply the selected mode
|
|
const htmlElement = document.querySelector("html");
|
|
if (isDarkMode) {
|
|
htmlElement.classList.add("dark");
|
|
} else {
|
|
htmlElement.classList.remove("dark");
|
|
}
|
|
}, [isDarkMode]);
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.darkModeBox}>
|
|
<h3>Dark/Light Mode</h3>
|
|
|
|
<Button
|
|
onClick={handleToggle}
|
|
variant="contained"
|
|
sx={{
|
|
textTransform: 'capitalize'
|
|
}}
|
|
className="whiteColor"
|
|
>
|
|
Switch to {isDarkMode ? "Light Mode" : "Dark Mode"}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DarkAndLightMode;
|