Matplotlib Widget Background Color in VSCode

Viewed 451

If I use a dark theme in vscode & 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 vscode

This also happens if I use the option of the jupyter extension to use the vscode 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 plot in browser

Is there a way to configure the jupyter extension / vscode / ... to have a real "dark mode for matplotlib"?

1 Answers

I have found the solution For anyone interested:

Make sure VS Code is closed.

Open file explorer, go to:

C:\Users\<your_username_here>\.vscode\extensions\ms-toolsai.jupyter-<(THE VERSION NUMBER MAY VARY)2022.4.1021342353>\out\webviews\webview-side\ipywidgetsRenderer

Open the ipywidgetsRenderer.js file (using notepad++ or notepad or even VSCode(before letting any jupyter stuff run)) and

wherever you see cell-output-ipywidget-background followed by background: white, replace white with black.

Now the problem is solved. Enjoy :)

Related