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

zcoop98 · Accepted Answer · 2022-09-26 16:05:36Z

4

I have found a workaround!

(Make sure Visual Studio 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 Visual Studio Code) before letting any Jupyter stuff run
Wherever you see cell-output-ipywidget-background followed by background: white, replace white with black.

Now the problem is solved. Enjoy :)

edited Sep 26, 2022 at 16:05

zcoop98

3,2852 gold badges26 silver badges38 bronze badges

answered Sep 23, 2022 at 11:26

Chandradhar Koneti

2673 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MisterMiyagi Over a year ago

Doesn't this change the background colour regardless of theme?

Chandradhar Koneti Over a year ago

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

Lucas Farias Over a year ago

On MacOS ipywidgetsRenderer.jscan be found in the same equivalent path. Tested the workaround and it worked just fine. +1

kitizz Over a year ago

For MacOS to be more specific I found the file at:

/Users/$USER/.vscode/extensions/ms-toolsai.jupyter-<VERSION NUMBER>/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)

Kirill Kay · Accepted Answer · 2023-11-25 07:42:16Z

2

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

answered Nov 25, 2023 at 7:42

Kirill Kay

9021 gold badge8 silver badges17 bronze badges

2 Comments

herrzinter Over a year ago

Thx! Note that the snippet needs to be used in conjuction with the code provided in my question, i.e. %matplotlib widget and plt.style.use('dark_background'). Thx for the answer!

Chandradhar Koneti Apr 28 at 9:11

This is giving me an error: Cell In[18], line 15 <style> ^ SyntaxError: invalid syntax

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related