12

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"?

zcoop98
  • 2,590
  • 1
  • 18
  • 31
herrzinter
  • 171
  • 7

1 Answers1

4

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

zcoop98
  • 2,590
  • 1
  • 18
  • 31
Chandradhar Koneti
  • 239
  • 2
  • 11
  • 2
    Doesn't this change the background colour regardless of theme? – MisterMiyagi Sep 26 '22 at 06:32
  • @MisterMiyagi you are right. But if you use a dark theme, It will prevent your eyes from getting burnt everytime you disaplay an image. It is just a workaround, not a Final solution. That will have to be implemented by the developers of Jupyter-VS-Code. – Chandradhar Koneti Sep 26 '22 at 06:58
  • 1
    On MacOS ```ipywidgetsRenderer.js```can be found in the same equivalent path. Tested the workaround and it worked just fine. +1 – Lucas Farias Dec 22 '22 at 18:01
  • For MacOS to be more specific I found the file at: `/Users/$USER/.vscode/extensions/ms-toolsai.jupyter-/out/webviews/webview-side/ipywidgetsRenderer/ipywidgetsRenderer.js` I also set the alpha to zero instead so it doesn't matter what your theme color is: `background: rgba(0, 0, 0, 0)` – kitizz Jun 04 '23 at 01:57