深色模式仅在 javascript react 中触发一次

Question

I am new to javascript react. I have made a button that will allow to change to dark mode but it gets fired only once and only after reloading it changes to normal once again.The navbar changes it's color okay but the about component doesn't. it either stays always in light mode or always in dark mode I am using bootstrap css.

App.js code

    import './App.css';
import Navbar from './components/Navbar';
import React,{ useState } from 'react';
import About from './components/About';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";
function App() {
  const[mode, setMode] = useState('light');
  
  const togglemode=()=>{
    if(mode==='light')
    {
      setMode('dark');
      document.body.style.backgroundColor ="#343a40"
      showAlert("Dark mode has been enabled","success")
    }
    else
    {
      setMode('light')
      document.body.style.backgroundColor="white"
      showAlert("Light mode has been enabled","success")
    }
  }
  return (
    <>
    <Router>

  <Navbar aboutText=" About "mode={mode} togglemode={togglemode}/>
    
  <div className="container my-3">
  <Switch>
          <Route exact path="/about">
            <About mode={mode}/>    
         
      </Route> 
           
          
        </Switch>
      
  </div>
    </Router>
  </>
  );
}

export default App;

Navbar.js code

   import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
export default function Navbar(props) {
    return (
      <>
        <nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
    <div className="container-fluid">
      <a className="navbar-brand" href="/">Navbar</a>
      <div className="collapse navbar-collapse" id="navbarSupportedContent">
        <ul className="navbar-nav me-auto mb-2 mb-lg-0">
          <li className="nav-item">
            <Link className="nav-link active" aria-current="page" to="/">Home</Link>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="/">Link</a>
          </li>
      
          <li className="nav-item">
            <Link className="nav-link active " to="/about" tabIndex="-1" aria-current="page">{props.aboutText}</Link>
          </li>
        </ul>
    <form className="d-flex mx-2">
          <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
          <button className="btn btn-outline-success" type="submit">Search</button>
        </form>
        
    <div className={`form-check form-switch text-${props.mode==='light'?'dark':'light'} mx-2`}>
                 <input className="form-check-input "onClick={props.togglemode} type="checkbox" id="flexSwitchCheckDefault"/>
                     <label className={`form-check-label `} htmlFor="flexSwitchCheckDefault">Enable Dark Mode</label>
                          </div>
        
        
</div>
      </div>
        
  </nav>
  </>
    )
}

About.js code

    import React from 'react'

export default function About(props) {
  let Mystyle={
      color:props.mode==='dark'?'light':'#04273',
      backgroundColor:props.mode==='dark'?'rgb(36 74 104)':'light',
      }
    return (
      <div classNameName="container" >

        <div className="accordion"  id="accordionExample">
  <div className="accordion-item"  >
    <h2 className="accordion-header"  id="headingOne">
      <button className="accordion-button collapsed" style={Mystyle}   type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" className="accordion-collapse collapse  " aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div className="accordion-body"  style={Mystyle}>
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classNamees that we use to style each element. These classNamees control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div className="accordion-item" >
    <h2 className="accordion-header" id="headingTwo">
      <button className="accordion-button collapsed" style={Mystyle} type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" className="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div classNameName="accordion-body"  style={Mystyle}>
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classNamees that we use to style each element. These classNamees control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div className="accordion-item" >
    <h2 className="accordion-header" id="headingThree">
      <button className="accordion-button collapsed" style={Mystyle} type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" className="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div className="accordion-body"  style={Mystyle}>
        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classNamees that we use to style each element. These classNamees control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>
</div>
    )
}

Answer 1

You have to pass the state for the dark mode to your input so that when you toggle dark mode in your app, it is correctly reflected on your switch/input. Also, the reason why your dark mode resets on page refresh is because your app is loaded again and you are not storing the data whether dark mode was ON/OFF. You can store it in localStorage and then check its value during render.