Change colors in python dash plotly theme

Question

I am currently creating my first plotly dash app and have a question on graph theming:

I want to use the available plotly_dark theme and only adjust the underlying colors (background and element colors) to custom values. I played around with the ideas provided here: https://plotly.com/python/templates/#saving-and-distributing-custom-themes like this

import plotly.graph_objects as go
import plotly.io as pio

pio.templates["plotly_dark_custom"] = go.layout.Template(
    ...custom definitions here...
)
pio.templates.default = "plotly_dark_custom"

but I was wondering if there is a more intuitive way, e.g. building a child theme from plotly_dark and only override the colors (providing a palette for the colors and define the new background color) afterwards.

As I am very new to Python my knowledge here is very limited, so I hope you can give me some pointers in the right direction.

Thank you and let me know if I should provide more details on this request. Stephan

Answer 1

in case this is helpful for others here a way I managed to get what I want:

1. Get the settings from plotly_dark (you only needs to do this once)
2. set custom template to plotly dark
3. update custom template based on your needs given the output from 1.

---

import plotly.graph_objects as go
import plotly.io as pio

plotly_template = pio.templates["plotly_dark"]
print (plotly_template)

pio.templates["plotly_dark_custom"] = pio.templates["plotly_dark"]

pio.templates["plotly_dark_custom"].update({
#e.g. you want to change the background to transparent
'paper_bgcolor': 'rgba(0,0,0,0)',
'plot_bgcolor': 'rgba(0,0,0,0)'
})

Most likely not the most elegant solution, but it does the trick. Stephan

Answer 2

I got an error when running Stephan's answer, so I thought I would post what ended up working for me.

# this helps us get the theme settings
import plotly.io as plt_io

# this is for simple plotting with plotly express
import plotly.express as px

# create our custom_dark theme from the plotly_dark template
plt_io.templates["custom_dark"] = plt_io.templates["plotly_dark"]

# set the paper_bgcolor and the plot_bgcolor to a new color
plt_io.templates["custom_dark"]['layout']['paper_bgcolor'] = '#30404D'
plt_io.templates["custom_dark"]['layout']['plot_bgcolor'] = '#30404D'

# you may also want to change gridline colors if you are modifying background
plt_io.templates['custom_dark']['layout']['yaxis']['gridcolor'] = '#4f687d'
plt_io.templates['custom_dark']['layout']['xaxis']['gridcolor'] = '#4f687d'

# load an example dataset to test
df = px.data.iris()

# create a nice default plotly example figure
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species",
                 size='petal_length', hover_data=['petal_width'])

# set the template to our custom_dark template
fig.layout.template = 'custom_dark'

# and voila, we have a modified dark mode figure
fig.show()