使Matplotlib小部件的背景颜色与Visual Studio Code中的暗主题匹配

Question

如果我在Visual Studio Code和Matplotlib中使用黑暗主题，那么可以配置图形的背景为黑色。但是，小部件/单元格的背景仍然是白色。

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

如果我使用 Jupyter 扩展的选项，在笔记本中使用 Visual Studio Code 主题，也会出现这种情况（实际上，那时情况甚至更糟，因为坐标轴标签不可见）。

请注意，我需要使用 %matplotlib widget 作为渲染器，而不能使用 %matplotlib inline。对于内联模式，我找到了一个可行的配置。

在浏览器中，如果我选择 Jupyter 暗色主题，它就可以工作，所以我想知道是否有一种方法可以配置 Jupyter 扩展/Visual Studio Code/... 来实现真正的“Matplotlib 暗模式”？

- herrzinter

Answer 1

我找到了一种解决方法！

(确保 Visual Studio Code 已经关闭。)

1. 打开文件资源管理器，进入以下目录：
   C:\Users\<你的用户名>\.vscode\extensions\ms-toolsai.jupyter-<(版本号可能有所不同)2022.4.1021342353>\out\webviews\webview-side\ipywidgetsRenderer

2. 在任何 Jupyter 相关的操作之前打开 ipywidgetsRenderer.js 文件（使用 Notepad++ 或 Notepad 或者甚至是 Visual Studio Code）。

3. 无论在哪里看到 cell-output-ipywidget-background 后面跟着 background: white，都将 white 替换为 black。

现在问题已经解决了。祝使用愉快 :)

- Chandradhar Koneti

---

这会改变背景颜色，无论主题是什么？ - MisterMiyagi

@MisterMiyagi，您说得对。但是如果您使用深色主题，每次显示图像时都可以防止眼睛受伤。这只是一个解决方法，而不是最终解决方案。这将由Jupyter-VS-Code的开发人员实施。 - Chandradhar Koneti

在MacOS上，ipywidgetsRenderer.js可以在相同的路径下找到。测试了解决方法，效果非常好。+1 - Lucas Farias

更具体地说，我在MacOS中找到了该文件： /Users/$USER/.vscode/extensions/ms-toolsai.jupyter-<版本号>/out/webviews/webview-side/ipywidgetsRenderer/ipywidgetsRenderer.js我还将 alpha 值设置为零，这样您的主题颜色就不重要了： background: rgba(0, 0, 0, 0) - kitizz

Answer 2

一个非常巧妙的解决方案是在绘图单元格之前添加一个HTML样式单元格：

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

来源：https://github.com/microsoft/vscode-jupyter/issues/9403

- Kirill Kay

---

谢谢！请注意，这段代码需要与我问题中提供的代码一起使用，即 %matplotlib widget 和 plt.style.use('dark_background')。感谢您的回答！ - undefined