37 lines
843 B
React
37 lines
843 B
React
import React, { useEffect, useState } from "react";
|
|
import { IconButton } from "@mui/material";
|
|
import SunAndMoonIcon from "./SunAndMoonIcon";
|
|
import "./index.css";
|
|
|
|
const ThemeSwitch = () => {
|
|
// TODO: change to use the MUI theme
|
|
const [currentTheme, setCurrentTheme] = useState("light");
|
|
const toggleTheme = () =>
|
|
setCurrentTheme((prevState) => (prevState === "light" ? "dark" : "light"));
|
|
|
|
useEffect(() => {
|
|
document.body.setAttribute("data-theme", currentTheme);
|
|
}, [currentTheme]);
|
|
|
|
return (
|
|
<IconButton
|
|
id="theme-toggle"
|
|
title="Toggles light & dark"
|
|
aria-label="auto"
|
|
aria-live="polite"
|
|
onClick={toggleTheme}
|
|
sx={{
|
|
width: 48,
|
|
height: 48,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<SunAndMoonIcon />
|
|
</IconButton>
|
|
);
|
|
};
|
|
|
|
export default ThemeSwitch;
|