Javascript – Dark-Mode toggling Issue

To achieve a global dark mode that applies to the entire website, you need to manage the dark mode state at a higher level than just within the DarkMode component. One way to do this is by lifting the state up to a common parent component that wraps your entire application. This way, the dark mode state is accessible by all components that need to be aware of it.

Create a state in the parent component (e.g., App.jsx) to manage the dark mode state.
Pass down the state and the function to toggle dark mode as props to the DarkMode component.
Update the DarkMode component to use the passed-down state and function.

App.jsx

import React, { useState } from 'react';
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';

function App() {
  const [toggleDarkMode, setToggleDarkMode] = useState(true);

  const toggleDarkTheme = () => {
    setToggleDarkMode(!toggleDarkMode);
  };

  return (
    <div>
      <Navbar />
      <DarkMode toggleDarkMode={toggleDarkMode} toggleDarkTheme={toggleDarkTheme} />
      <Hero />
      <Card />
      <About />
      <Feature />
      <Workshop />
      <Opensource />
      <Footer />
    </div>
  );
}

export default App;

DarkMode.jsx

import React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { Switch } from '@mui/material';

export default function DarkMode({ toggleDarkMode, toggleDarkTheme }) {
  const darkTheme = createTheme({
    palette: {
      mode: toggleDarkMode ? 'dark' : 'light',
      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>
  );
}

Now, the dark mode state is managed in the App component, and both Navbar and DarkMode components have access to the same state. This way, when you toggle dark mode in the DarkMode component, it will affect the entire application.