How can I get rid of or recolour the background of ipywidgets frames in a Jupyter Notebook in VS Code?

Question

I have a Jupyter Notebook running in VS Code with an ipywidgets button. The button gets displayed in a layout frame with a white background. I’d like to get rid of that frame, or make its background transparent. I’ve tried putting it inside a Layout object such as an HBox, but the layout component renders inside this white container.

I suspect this can only be controlled in the VS Code Jupyter extension, but thought I’d ask anyway.

Here is a minimal example of the code I’m using to create the button in the notebook:

import ipywidgets as widgets

button = widgets.Button(description='Click me')
button.on_click(lambda x: print('Clicked!'))
button

Asked By: Carmen DiMichele

||

Source

Answer 1

The relevant source code for this in the microsoft/vscode-jupyter GitHub repo is src/webviews/webview-side/ipywidgets/renderer/styles.css, which at the time of this writing, just contains:

.cell-output-ipywidget-background {
    background: white !important;
}

The relevant GitHub feature-request issue ticket is Add support for theming of IPyWidgets #7161. Quoting from the discussion thread:

DonJayamanne:

We hardcode the background, as IPYWidgets doesn’t understand VS Code themes. & it defaults to white backgrounds in jupyter & jupyter lab,
If we want to fix this, we need to get our support of ipywidgets to understand vscode themes (fonts, etc).

martinRenou:

I believe this can be achieved by making a bridge from the vscode theme (CSS variables?) to the jupyterlab theme.

ipywidgets (and other libraries for Jupyter) use the JupyterLab CSS variables for respecting the theme.

It might just be a matter of defining the needed CSS variables using the current VSCode theme.

chandradharkoneti:

For anyone interested:
I have found a hacky sacky solution.

Make sure VS Code is closed(at least no jupyter related things should be running on it[ I personally closed it completely and reopened it for editing the below file]).

Open file explorer, go to:

C:Users<your_username_here>.vscodeextensionsms-toolsai.jupyter-2022.4.1021342353outwebviewswebview-sideipywidgetsRenderer

Open the ipywidgetsRenderer.js file (using notepad++ or notepad or even VSCode(before letting any jupyter stuff run)) and

wherever you see cell-output-ipywidget-background followed by background: white, replace white with black.

You can find the list of other VS Code CSS variables you could use instead of hardcoding a colour if you open the devtools with Developer: Toggle Developer Tools and then click on the .monaco-workbench element and search for "background".

A different (maybe better?) workaround was found in a different but related thread: White background for ipywidgets in dark themes
#9403:

Filip-K:

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

Answered By: user

How can I get rid of or recolour the background of ipywidgets frames in a Jupyter Notebook in VS Code?

Question:

Answers: