is it possible to change background color of main body for multiple pages?-CodePudding

My dashboard has multiple pages, each page contain top navigation bar and container.

in style.css file, there is only one body to change background color of body, currently I change background colors of container.

My question is: is it possible to change background color of whole body when switching from one page to the other page?


page1_layout = html.Div([navbar_page1, container_page1])
page2_layout = html.Div([navbar_page2, container_page2])

container_page1 = html.Div([top_info_page1, grid_container_page1]
container_page2 = html.Div([top_info_page2, grid_container_page2]


:root {
    --text-color: #798d8f;
    --tab-color: #212529;
}

/* Add background color to entire app */
body {
    background-color: var(--text-color);
  }

#container-page1 {
    margin-left: 1%;
    margin-right: 1%;
}

#container-page2 {
    margin-left: 1%;
    margin-right: 1%;
    background-color: #DADADA;

CodePudding user response：

You can give a class/id to the body element and set the specific class/id background color

    <body id="page1">content</body>

    <body id="page2">content</body>

body{
background: red;
}
#page2{
background: blue !important;
}

CodePudding user response：

try this:

document.body.style.backgroundColor= 'the color';