VS Code Jupyter notebook dark theme for interactive elements

Question

I'm using a dark theme for entire VS Code and I set "jupyter.themeMatplotlibPlots": true to also make the matplotlib plots dark. This setup works great as long as I don't use any interactive elements.

Examples of bad behaviour

For example if I run %matplotlib widget (you need to python -m pip install ipympl for this to work) I get an ugly white border around the plot:

Also the widgets from ipywidgets don't respect the dark theme:

Same goes for elements from IPython.display:

Above examples respect the dark theme in Google's Collab so there must be a way to tell these widgets to use the dark theme. But I can't find a good way to do so.

Unfruitful attempts of fixing the problem

I tried running set_nb_theme('chesterish') from jupyterthemes.stylefx and it did change the background slightly but the white borders around the widgets remained unchanged.

I noticed that the set_nb_theme function returns a IPython.core.display.HTML object which contains some CSS so I tried to make my own:

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

and this indeed made the interactive plot dark:

I'm not fully satisfied with this solution bacause to get the dark theme I have to add some lengthy code to the beginning of each notebook (the VS Code setting "jupyter.runStartupCommands" doesn't work since the HTML object must be in a cell output) and I would have to write custom CSS for every widget that I use (the above solution does not fix the slider or audio widget).

The Question

So my qusetion is: How to make the interactive widgets use their dark mode stylesheets inside VS Code notebook in the most elegant way possible?

Answer 1

The vscode is adding this white background to the interactive ipywidgets.

Please add the following css code in a python cell before your interactive widget cell

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

More about this can be found at

• https://github.com/microsoft/vscode-jupyter/issues/9403
• https://github.com/microsoft/vscode-jupyter/issues/7161#issuecomment-1616627670

Referece:

• Pass VS Code default dark theme to Matplotlib: https://stackoverflow.com/a/70435724/3569768