Dark Mode using React useState Hooks. No Backend Code.

Now, Here we go straight forward to the main topic:

• First of all, we have to make use of the useState hook for the dark mode CSS style as :

    //useState Hook for darkmode 
    const [container,setContainer]=useState({
        color:'white',
        backgroundColor:'black',
  
      });
  

• Secondly, we use another useState hook for the button text, which also has to change during the dark and light modes.

     // usestate hook for text inside buttion
      const[buttontext,setButtontext]=useState('Enable LightMode');
  

• Thirdly, we have now defined that state, then we have to change its CSS value when the button is clicked i.e. Enable/Disable Button.

    //Here,when button is clicked toggleLight function is invoked
    <button className="m-2 p-2 btn btn-light" onClick={toggleLight}>{buttontext}</button>
  

• Here when the button is clicked toggleLight function is invoked. Now we have to define the functionality for this button as :

    const toggleLight=()=>{
  
        if(container.color==='white')
        {
          setContainer({
  
            color:'black',
            backgroundColor:'white',
          })
          setButtontext('Enable DarkMode')
        }
        else
        {
          // console.log(mode.color)
          // console.log("white")
          setContainer({
            color:'white',
            backgroundColor:'black',
          })
          setButtontext('Enable LightMode')
        }
      }
  

  That's it.

"Happy Face, Happy Reader"-s2