Breaking News: Grepper is joining You.com. Read the official announcement!

how to implement dark and light mode in react simple logic

py_hacker answered on September 11, 2023 Popularity 7/10 Helpfulness 6/10

answer how to implement dark and light mode in react simple logic

related dark and light mode in react js

how to implement dark and light mode in react simple logic

Comment

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;
}

Popularity 7/10 Helpfulness 6/10 Language javascript

Source: Grepper

Tags: javascript light logic mode

Link to this answer
Share Copy Link

Contributed on Oct 18 2023

py_hacker

0 Answers Avg Quality 2/10

Closely Related Answers

dark and light mode in react js

Comment

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;

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 11 2023

YOU.com

0 Answers Avg Quality 2/10

how to implement dark and light mode in react simple logic

Contents

More Related Answers

how to implement dark and light mode in react simple logic

Closely Related Answers

dark and light mode in react js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.