Search code examples
matplotlibvisual-studio-codejupyteripywidgets

Make Matplotlib widget background color match dark theme in Visual Studio Code

If I use a dark theme in Visual Studio Code and in Matplotlib, the figure can be configured to have dark background, but the background of the widget / cell is still white.

%matplotlib widget

import matplotlib.pyplot as plt
import numpy as np

plt.style.use('dark_background')

figure, axis = plt.subplots()

axis.plot(np.arange(100))

Image of plot in Visual Studio Code

This also happens if I use the option of the Jupyter extension to use the Visual Studio Code theme in the notebook (actually, then it's even worse because the axis labels are not visible).

Note, that I need to use %matplotlib widget as a renderer, and cannot use %matplotlib inline. For inline, I found a configuration that works.

In the browser, it works if I select the Jupyter dark theme, so I guess, I would kind of select a different "theme" in the Jupyter renderer extension, if something like this is possible (?)

Image of the plot in a browser

Is there a way to configure the Jupyter extension / Visual Studio Code / ... to have a real "dark mode for Matplotlib"?

Solution

  • A non-hacky solution is to add an html styling cell before your plot cell:

    %%html
<style>
.cell-output-ipywidget-background {
   background-color: transparent !important;
}
.jp-OutputArea-output {
   background-color: transparent;
}  
</style>

    Source: https://github.com/microsoft/vscode-jupyter/issues/9403