matplotlib VS Code Code笔记本黑暗主题为互动元素

qkf9rpyu  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(123)

我在整个VS代码中使用了一个黑暗的主题,我设置了"jupyter.themeMatplotlibPlots": true也使matplotlib的图变暗。只要我不使用任何交互元素,这个设置就很好用。

不良行为示例

例如,如果我运行%matplotlib widget(你需要python -m pip install ipympl才能运行),我会在图周围得到一个难看的白色边框:

此外,ipywidgets的小部件不尊重黑暗主题:

IPython.display

中的元素也是如此
上面的例子尊重了Google的Collab中的黑暗主题,所以必须有一种方法来告诉这些小部件使用黑暗主题。但是我找不到一个好的方法来这样做。

修复失败

我试着从jupyterthemes.stylefx运行set_nb_theme('chesterish'),它确实稍微改变了背景,但小部件周围的白色边框保持不变。

我注意到set_nb_theme函数返回了一个IPython.core.display.HTML对象,其中包含一些CSS,所以我尝试自己创建:

from IPython.display import HTML
HTML('''
<style>
.jupyter-matplotlib {
    background-color: #000;
}

.widget-label, .jupyter-matplotlib-header{
    color: #fff;
}

.jupyter-button {
    background-color: #333;
    color: #fff;
}
</style>
''')

这确实使互动情节变暗了:

我对这个解决方案并不完全满意,因为要获得黑暗主题,我必须在每个笔记本的开头添加一些冗长的代码(VS Code设置"jupyter.runStartupCommands"不起作用,因为HTML对象必须在单元格输出中),并且我必须为我使用的每个小部件编写自定义CSS(上述解决方案没有修复滑块或音频小部件)。
问题
所以我的问题是:如何使交互式小部件以最优雅的方式在VS Code Notebook中使用它们的暗模式样式表?

xytpbqjk

xytpbqjk1#

vscode将这个白色背景添加到交互式ipywidgets中。
请在交互式小部件单元格之前的Python单元格中添加以下CSS代码

%%html
<style>
/*overwrite hard coded write background by vscode for ipywidges */
.cell-output-ipywidget-background {
   background-color: transparent !important;
}

/*set widget foreground text and color of interactive widget to vs dark theme color */
:root {
    --jp-widgets-color: var(--vscode-editor-foreground);
    --jp-widgets-font-size: var(--vscode-editor-font-size);
}
</style>

有关此方面的更多信息,请访问

参考:

相关问题