Following is my DarkMode.jsx Component When I switch button ,dark mode apply only to navbar.
Other remaining Part of website not changed to Dark theme.How should I keep State updated everywhere.
using Material UI I am trying darkMode.
import React,{useState} from 'react';
import { ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import { Switch, } from "@mui/material"
export default function DarkMode() {
// state to manage the dark mode
const [toggleDarkMode, setToggleDarkMode] = useState(true);
// function to toggle the dark mode as true or false
const toggleDarkTheme = () => {
setToggleDarkMode(!toggleDarkMode);
};
// applying the primary and secondary theme colors
const darkTheme = createTheme({
palette: {
mode: toggleDarkMode ? 'dark' : 'light', // handle the dark mode state on toggle
primary: {
main: '#90caf9',
},
secondary: {
main: '#131052',
},
},
});
return (
<ThemeProvider theme={darkTheme}>
<CssBaseline/>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<h2>Toggle Dark mode</h2>
<Switch checked={toggleDarkMode} onChange={toggleDarkTheme} />
</div>
</ThemeProvider>
)
}
I add my DarkMode Component inside Main.jsx after Navbar component
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
// import App from './App'
import Navbar from './Components/components/Navbar';
import Hero from './Components/components/Hero';
import About from './Components/components/About';
import Feature from './Components/components/Feature';
import Card from './Components/components/Card';
import Opensource from './Components/components/Opensource';
import Footer from './Components/components/Footer';
import Workshop from './Components/components/Workshop';
import DarkMode from './Components/components/DarkMode';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Navbar/>
<DarkMode/>
<Hero />
<Card />
<About />
<Feature />
<Workshop/>
<Opensource />
<Footer />
</React.StrictMode>,
)