Simple dark mode

Dash Python
1

Hi,

I’d like to use dark mode on the dash, I’ve been trying for two days but can’t find a solution. I don’t want a toggle button or any switch, I just simply want a dark theme. I’ve tried every solution I found on the internet, the background color changes, but the graph does not. This is a part of my code:

from dash import html, dcc, Output, Input, Dash
import dash_bootstrap_components as dbc

...

app = Dash(__name__, external_stylesheets=[dbc.themes.DARKLY])
app.layout = dbc.Container([
    dcc.Graph(id="graph")
])

...

What am I doing wrong?

2

Hi @mocsar , I don’t think dbc themes can affect to graph background. So I think you should set template for your figure as plotly_dark or use plot_bgcolor='#000000',paper_bgcolor='#000000' when update layout.

3

Hi @mocsar welcome to the forums!

Maybe this helps:

1 Like
4

For every plot add:
fig.layout.template = ‘plotly_dark’

5

Hi All,

Thank you for your help, you’ve confirmed for me that there isn’t a one-line solution.
I’ll summarize what was needed:

  1. Load the templates:
from dash_bootstrap_templates import load_figure_template

load_figure_template(["cyborg", "darkly"])
  1. Set figure property if you load more than one templete above:
dcc.Graph(id="graph", figure=px.scatter(x=[0], y=[0], template='darkly'))
  1. Use dbc elements instead of html where possible:
dbc.Button('Start', id='submit-start', n_clicks=0),
  1. Copy the figure layout in clientside callback. This is my code:
app.clientside_callback(
    """
    function (n_intervals, figure) {
        return {
            data: [{x: window.xData, y: window.yData, type: "scatter", marker: {symbol: "circle"}, mode: "markers" }],
           layout: {template: figure.layout.template}
        };
    }
    """,
    Output("graph", "figure"),
    Input("interval", "n_intervals"),
    State('graph', 'figure'),
    prevent_initial_call=True
)
6

Hi @mocsar

If you don’t want a theme switch, you don’t need to update the figure in a callback or set the template.

Try running this this example

from dash import Dash, dcc, html
import plotly.express as px
import dash_bootstrap_components as dbc
from dash_bootstrap_templates import load_figure_template

# loads the "darkly" template and sets it as the default
load_figure_template("darkly")

df = px.data.tips()

fig = px.scatter(df, x="total_bill", y="tip", color="size")

app=Dash(__name__, external_stylesheets=[dbc.themes.DARKLY])
app.layout = dbc.Container([
    html.H1("Dash App in Dark Mode", className="text-center"),
    dcc.Graph(figure=fig)
])

if __name__ == "__main__":
    app.run(debug=True)

image
image2142×1164 139 KB

Plus you can make it even simpler if you just want to use the built-in plotly_dark template. Then you don’t need to use the Bootstrap themed templates from the dash_bootstrap_templates library. Then it’s not even one line of code different - it’s only changing one prop:

from dash import Dash, dcc, html
import plotly.express as px
import dash_bootstrap_components as dbc

df = px.data.tips()

fig = px.scatter(df, x="total_bill", y="tip", color="size", template="plotly_dark")

app=Dash(__name__, external_stylesheets=[dbc.themes.DARKLY])
app.layout = dbc.Container([
    html.H1("Dash App in Dark Mode", className="text-center"),
    dcc.Graph(figure=fig)
])

if __name__ == "__main__":
    app.run(debug=True)
2 Likes