Alter the app's entire background color in React.js with a button click

Question

Alter the app's entire background color in React.js with a button click

I am facing an issue with changing the background color of my entire React App when a button is clicked. Currently, I am able to change the color of the button itself but not the background. I have imported the App.css file into my project and I am looking for a way to dynamically update the CSS of the App using a separate function called ChangeColor. This function is located in my Header.js which is then included in the App.js

Is there a solution to achieve this? Here is the code snippet:

import React, {useState} from "react";
import Button from "react-bootstrap/esm/Button";
import '../../../App.css'

function ChangeColor() {
    const [isActive, setIsActive] = useState(false);
    const handleClick = () => {
        setIsActive(current => !current);
    };

    return(
        <Button 
            style={{
                backgroundColor: isActive ? 'red' : '',
                color: isActive ? 'white' : '',
            }}
            onClick={handleClick}
        > Test </Button>
    )
}

export default ChangeColor

.App {
  text-align: center;
  background-color: white;
}

javascript css reactjs

Answer 1

Answer №1

When considering ways to address this issue, a few solutions stand out.

One option is to store the background color in the state and switch between colors based on the current state.

(A quick note - it's advisable not to name your component ChangeColor as it may not accurately reflect the component's purpose. Perhaps using ButtonChangeColor would be more appropriate.)

const { useState } = React;

function Example() {

  const [bgColor, setBgColor] = useState('white');

  function toggleBackground() {
    if (bgColor === 'white') setBgColor('black');
    if (bgColor === 'black') setBgColor('white');
  }

  const appStyle = ['App', bgColor].join(' ');

  return (
    <div className={appStyle}>
      <button onClick={toggleBackground}>
        Toggle background
      </button>
    </div>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

.App {
  height: 100vh;
  background-color: white;
}

.black { background-color: black; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Alternatively, you can utilize CSS variables and adjust the current stylesheet through the CSSStyleDeclaration interface without needing to maintain state. The toggleBackground function can remain outside the component, independent of state requirements.

function toggleBackground() {
  const { style } = document.documentElement;
  const bgColor = style.getPropertyValue('--bg-color');
  if (bgColor === 'white' || bgColor === '') {
    style.setProperty('--bg-color', 'black');
  } else {
    style.setProperty('--bg-color', 'white');
  }
}

function Example() {
  return (
    <div className="App">
      <button onClick={toggleBackground}>
        Toggle background
      </button>
    </div>
  );
}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

:root { --bg-color: white; }

.App {
  height: 100vh;
  background-color: var(--bg-color);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

When considering ways to address this issue, a few solutions stand out.

One option is to store the background color in the state and switch between colors based on the current state.

(A quick note - it's advisable not to name your component ChangeColor as it may not accurately reflect the component's purpose. Perhaps using ButtonChangeColor would be more appropriate.)

const { useState } = React;

function Example() {

  const [bgColor, setBgColor] = useState('white');

  function toggleBackground() {
    if (bgColor === 'white') setBgColor('black');
    if (bgColor === 'black') setBgColor('white');
  }

  const appStyle = ['App', bgColor].join(' ');

  return (
    <div className={appStyle}>
      <button onClick={toggleBackground}>
        Toggle background
      </button>
    </div>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

.App {
  height: 100vh;
  background-color: white;
}

.black { background-color: black; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Alternatively, you can utilize CSS variables and adjust the current stylesheet through the CSSStyleDeclaration interface without needing to maintain state. The toggleBackground function can remain outside the component, independent of state requirements.

function toggleBackground() {
  const { style } = document.documentElement;
  const bgColor = style.getPropertyValue('--bg-color');
  if (bgColor === 'white' || bgColor === '') {
    style.setProperty('--bg-color', 'black');
  } else {
    style.setProperty('--bg-color', 'white');
  }
}

function Example() {
  return (
    <div className="App">
      <button onClick={toggleBackground}>
        Toggle background
      </button>
    </div>
  );
}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

:root { --bg-color: white; }

.App {
  height: 100vh;
  background-color: var(--bg-color);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 3

Answer №2

To easily manage the state of isActive and color, consider utilizing localStorage for storage.

const [isActive, setIsActive] = useState(localStorage.getItem('is_active') || false);
    const handleClick = () => {
        setIsActive(current => !current);
    };


<Button 
      style={{
          backgroundColor: isActive ? 'red' : '',
          color: isActive ? localStorage.getItem('bg_color') : '',
      }}
      onClick={handleClick}
  > Test </Button>

Answer 4

To easily manage the state of isActive and color, consider utilizing localStorage for storage.

const [isActive, setIsActive] = useState(localStorage.getItem('is_active') || false);
    const handleClick = () => {
        setIsActive(current => !current);
    };


<Button 
      style={{
          backgroundColor: isActive ? 'red' : '',
          color: isActive ? localStorage.getItem('bg_color') : '',
      }}
      onClick={handleClick}
  > Test </Button>

Answer 5

Answer №3

Your code is experiencing an issue because you are manipulating the properties of the button instead of acting on the element whose color you intend to change.

Within this code snippet, the button is altering the color of the root div. It's important to note that this demonstration serves solely to highlight the problem at hand. There exist numerous approaches to achieving the desired outcome, some aligning with best practices more than others. The purpose of this response is simply to address why the current approach is ineffective, rather than prescribing the optimal method. For a comprehensive explanation, please refer to Andy's answer.

const App = () => {
  const changeAppColor = () => {
    let el = document.getElementById("root");
    if (el.style.backgroundColor === "red") {
      el.style.backgroundColor = "unset";
    } else {
      el.style.backgroundColor = "red";
    }
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <button onClick={changeAppColor}>
        Change color
      </button>
    </div>
  );
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

<div id='root'> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Answer 6

Your code is experiencing an issue because you are manipulating the properties of the button instead of acting on the element whose color you intend to change.

Within this code snippet, the button is altering the color of the root div. It's important to note that this demonstration serves solely to highlight the problem at hand. There exist numerous approaches to achieving the desired outcome, some aligning with best practices more than others. The purpose of this response is simply to address why the current approach is ineffective, rather than prescribing the optimal method. For a comprehensive explanation, please refer to Andy's answer.

const App = () => {
  const changeAppColor = () => {
    let el = document.getElementById("root");
    if (el.style.backgroundColor === "red") {
      el.style.backgroundColor = "unset";
    } else {
      el.style.backgroundColor = "red";
    }
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <button onClick={changeAppColor}>
        Change color
      </button>
    </div>
  );
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

<div id='root'> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Alter the app's entire background color in React.js with a button click

Answer №1

Answer №2

Answer №3

Similar questions

Error message: After using gulp-npm-dist to copy only the dependency modules, the node module was not

Highlight the parent name in the menu when I am on the corresponding child page

There seems to be a problem with the text-to-speech API: It looks like there's a ReferenceError stating that

Tips for accessing and modifying parent state resolve data within the onEnter function of a child state in a UI router

Looking to adjust the API response to fit the necessary JSON format for an Angular project?

Immediate display of collapsed/toggle menu in a Bootstrap navbar

Stop Material-UI InputLabel from shifting to the top left corner of the Select element

Error encountered while compiling versus browsing in a ReactJS application

Does Google's caching process differ when using <span> tags instead of <h> tags for headings?

Can you provide a brief explanation for this bubble sort JavaScript code?

Tips for adjusting the width of items within the Box element in Material UI React

Firebase hosting adjusts the transparency of an element to 1% whenever it detects the presence of CSS opacity

"Troubleshooting the slow loading of PDF files when using React's render-pdf feature

When the input CTRL+C is entered in the console, Node.js / JavaScript will output

Convert inline javascript into an external function and update the reference to `this`

Tips for integrating a hubspot form into a Next JS component

Guide on how to retrieve a response from an API Route and integrate it into the client side of the app router within Next.js

Reorganize divisions using Bootstrap

Sending data from JavaScript to Jade templatesIs this alright?

Tips for changing the size and color of SVG images in a NextJS application