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

Question

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))

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 (?)

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

Answer 1

I have found a workaround!

(Make sure Visual Studio Code is closed.)

1. 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

2. Open the ipywidgetsRenderer.js file (using Notepad++ or Notepad or even Visual Studio Code) before letting any Jupyter stuff run

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

Now the problem is solved. Enjoy :)