import React from 'react'

import { useEffect,useState } from 'react'

​

export default function ThemeEx(){

​

    const body = document.querySelector("body")

​

    const [IsColor, setIsColor] = useState(false)

​

    useEffect(() => {

        if (IsColor){

            body.classList.add("dark-mode")

            body.classList.remove("white-mode")

        }

        else{

            body.classList.add("white-mode")

            body.classList.remove("dark-mode")

        }

​

        },[IsColor]

    )

    const handleClick = () => {

        setIsColor( ! IsColor)

    }

    return(

        <div className="main">

            <button onClick={handleClick}> <span> Click me to change mode from {IsColor ? "Dark":"white"} to {IsColor ? "White":"Dark"} </span></button>

        </div>

    )

}

​

.main{

    height:100vh;

    width:100%;

}

​

.white-mode{

    background-color: white;

}

​

.dark-mode{

    background-color: black;

}

​

.white-mode span {

    color: black;

}

​

.dark-mode span {

    color: white;

}

​

​

import React, { useState, useEffect } from "react";

​

const App = () => {

  const [isDarkMode, setIsDarkMode] = useState(false);

​

  useEffect(() => {

    const body = document.querySelector("body");

    if (isDarkMode) {

      body.classList.add("dark-mode");

    } else {

      body.classList.remove("dark-mode");

    }

  }, [isDarkMode]);

​

  const handleModeToggle = () => {

    setIsDarkMode(!isDarkMode);

  };

​

  return (

    <div className="app">

      <button onClick={handleModeToggle}>

        {isDarkMode ? "Switch to Light Mode" : "Switch to Dark Mode"}

      </button>

      <h1>{isDarkMode ? "Dark Mode" : "Light Mode"}</h1>

      {/* Rest of your application */}

    </div>

  );

};

​

export default App;