Hello. I just started using Dash. I am using Dash Bootstrap Components, and Dash Bootstrap Templates to have a coherent theme. However, it seems the page background color doesnt match with chart color
import dash
import dash_bootstrap_components as dbc
from dash_bootstrap_templates import load_figure_template
import plotly.express as px
from dash import html, dcc
import pandas as pd
PLOTLY_LOGO = "https://images.plot.ly/logo/new-branding/plotly-logomark.png"
load_figure_template("darkly")
df = pd.DataFrame(
{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"],
}
)
fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
fig2 = px.bar(df, y="Fruit", x="Amount", color="City", barmode="group")
def update_bg(fig):
fig.update_xaxes(showgrid=False)
fig.update_yaxes(showgrid=False)
fig.update_layout({"plot_bgcolor": "rgba(0,0,0,0)"})
update_bg(fig)
update_bg(fig2)
app = dash.Dash(external_stylesheets=[dbc.themes.DARKLY])
logo = dbc.Navbar(
dbc.Container(
[
html.A(
# Use row and col to control vertical alignment of logo / brand
dbc.Row(
[
dbc.Col(html.Img(src=PLOTLY_LOGO, height="75px")),
dbc.Col(
dbc.NavbarBrand(
[
html.Span("Fruit ", style={"color": "#E03531"}),
html.Span("Stand INC", style={"color": "#2c69b0"}),
],
className="ms-2",
)
),
],
align="center",
className="g-0",
),
href="/",
style={"textDecoration": "none"},
),
],
fluid=True,
),
dark=True,
color="dark",
className="mb-5",
)
app.layout = html.Div(
[
logo,
dbc.Container(
[
dbc.Row(
[dbc.Col(dcc.Graph(figure=fig)), dbc.Col(dcc.Graph(figure=fig2))]
),
dbc.Row([dbc.Col(dcc.Graph(figure=fig2))]),
]
),
]
)
if __name__ == "__main__":
app.run_server(debug=True, port=8888)
