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

Question

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;

score 3 · Accepted Answer · answered Apr 29 '22 at 18:24

3

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

answered Apr 29 '22 at 18:24

Darsh Sikka

71
2

how to assign id to body tag inside dash ? – Saeid Mohammadi Nejati Jan 15 '23 at 11:26

score 0 · Answer 2 · answered Apr 29 '22 at 18:22

0

try this:

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

answered Apr 29 '22 at 18:22

Hesam

450
2
11

how to use it inside dash .py files ? – Saeid Mohammadi Nejati Jan 15 '23 at 11:27

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

2 Answers2

Linked