tratando de construir mi propio modo oscuro para un componente específico en mi sitio de crear-reaccionar-aplicación y usando MUI. Tengo el interruptor trabajando para cambiar el estado al alternar, pero parece que no puedo encontrar cómo alternarlo de un lado a otro. Básicamente, quiero que la página se oscurezca al alternar y volver a encenderla en el mismo botón de alternancia. Sugerencias por favor.
import React from 'react' import Switch from '@mui/material/Switch'; const DarkMode = () => { const [color, setColor] = React.useState(false) return ( <div style={{ backgroundColor: color ? '#2c2d30' : '#ffffff' }}> <Switch onChange={setColor} /> <h1 style={{ color: color ? '#ffffff' : '#000000' }}>Hello welcome to my site</h1> </div> ) } export default DarkModeconst DarkMode = () => { const [color, setColor] = React.useState(false) const toggle = () =>{ setColor(!color); } return ( <div style={{ backgroundColor: color ? '#2c2d30' : '#ffffff' }}> <Switch onChange={toggle} /> <h1 style={{ color: color ? '#ffffff' : '#000000' }}>He</h1> </div> ) } export default DarkMode