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

Attempting the connected components with jest and react-testing-library

"Utilizing a JavaScript array to track the start of the week and

Javascript malfunctioning - exhausted all troubleshooting options

"Utilizing FileReader to seamlessly integrate data into FormData without the risk

Utilizing children as a prop within a Vue component

Choose all the HTML content that falls within two specific tags

Maintain the functionality, but disable all stylesheets and scripts

$routeProvider - providing controller dependencies based on the URL path

Arranging an array based on numerical values embedded in strings

Implement the TypeScript handleChange function for input fields and dropdown menus

Adjust the element based on hover over the pseudo element

Save property using the useState hook

What is the best way to encapsulate a slider within a fragment to prevent the occurrence of the "Type 'Element[]' is not assignable to type 'ReactNode'" error?

Is it possible to incorporate an existing svg from the page into another svg element?

The Gatsby + Typescript project is reporting that the module with the name "*.module.scss" does not have any exported members

Determine if a mobile application has been installed using Vue.js

How to stop crosshair line at the intersection point of x and y axes on a line graph using Highcharts

Instructions for transforming rows into columns in JSON format

Why is the 'a' element not clickable after the AJAX complete function has executed in JavaScript?

Using Vue.js to group JSON arrays multiple times