Is it possible to change background color of main body for multiple pages?

user_9983652 0
Viewed 274

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

In my 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;
plotly-dash css
2 Answers

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

try this:

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