Search code examples
javascriptcssreactjscolorsbackground-color

Javascript: change color of the entire page

I'm developing a website for a personal project and I have a problem with the background color setting.

Whatever I do to change the color only changes the color of the container inside my page. I tried to add a class to my div in App.js or to add background color in the css body property of my App.css but nothing works. I did the same in the public folder in index.html by adding in the body <body style="background-color: red"> but still the same problem.

I put a part of my frontend code here and screenshot of my issue after, hoping you can help me.

App.js

import React, { Component, useState, useEffect } from 'react';
import { Switch, Route, withRouter } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css';

function App() {

  useEffect(() => {
    const user = AuthService.getCurrentUser();
    ...
  });

  return (
    <div className='global'> //try to implement a css class with a new background color set
      <div>
        <NavBar />
      </div>
      <div className="container mt-3">
        <Switch>
          <Route exact path="/login" component={Login} />
          <Route exact path="/register" component={Register} />
          <Route path="/dashboard" component={Dashboard} />
          ....
        </Switch>
      </div>
    </div>
  );
}

export default withRouter(App);

App.css

...

.global {
  background-color: red;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App /> //I also try to implement a css class with a new background color set for app but same issue
    </BrowserRouter>, document.getElementById('root'));

serviceWorker.unregister();

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

Any help would be greatly appreciated :)

my site before changing color in my code

my site after changing color in my code with new color only on one part of my page, I scribbled in green the part where the color does not change but I would like it to change

Solution

  • if you really want to change the colour of the whole page, you can just target body in your CSS, like

    body{
  background-color: red;
}

    You can make this change in your index.css and add this line in your body selector.

    body {
  margin: 0;
  background-color: red;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

    IMPORTANT NOTE

    There may be a case where you have elements with their own background colour, and they will continue to have that until to specifically change each element CSS. Changing body or html background colour won't impact individual elements.