Add support for theming of IPyWidgets

[rebornix]

Environment data

• VS Code version: 1.60-Insiders
• Jupyter Extension version (available under the Extensions sidebar): 2021.8.2027072902

[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).

Changing to a feature requiest.

[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>\.vscode\extensions\ms-toolsai.jupyter-2022.4.1021342353\out\webviews\webview-side\ipywidgetsRenderer

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.

Now the problem is solved. Enjoy :)

[yusisc]

@chandradharkoneti
This method works good. But, the text color of additional information is black, too.
Is there a way to make the texts be brighter ?

[starball5]

Related Stack Overflow question: How can I get rid of or recolour the background of ipywidgets frames in a Jupyter Notebook in VS Code?

Other issue tickets that look related: #10609 and #9403

[npulidomateo]

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

tansparent also works. Nice if you like to change to a light color scheme in less dark situations.

[kylemcdonald]

@chandradharkoneti This method works good. But, the text color of additional information is black, too. Is there a way to make the texts be brighter ?

Here is a hack for making the print statements readable:

css_widget = widgets.HTML("""
<style>
.cell-output-ipywidget-background {
   background-color: transparent !important;
}
.cell-output-ipywidget-background pre {
   color: white !important;
}
</style>
""")
display(css_widget)

[Shisoik]

I added following HTML cell that makes background transparent and binds widgets' foreground text colour and size to that of the active VSCode editor theme.

%%html
<style>
.cell-output-ipywidget-background {
    background-color: transparent !important;
}
:root {
    --jp-widgets-color: var(--vscode-editor-foreground);
    --jp-widgets-font-size: var(--vscode-editor-font-size);
}  
</style>

[tianfanghan]

Is there a way to just get rid of the frame it self? Just set margin or padding or box to zero?

[alex180500]

Is there a way to just get rid of the frame it self? Just set margin or padding or box to zero?

Yes I would really like this!

[Jnorm911]

bump.

[flying-sheep]

I think the jupyter team should define some mandatory CSS variables that are to be defined in any frontend, including Jupyter Lab, VS Code, and the output of HTML conversion scripts (e.g. nbconvert, MyST-nb)

[martinRenou]

It's actually already defined. ipywidgets requires the same CSS variables as a JupyterLab theme would provide.

Note that ipywidgets provides a set of default values for when there is no JupyterLab theme available in the page: https://github.com/jupyter-widgets/ipywidgets/blob/main/packages/controls/css/labvariables.css. The VSCode jupyter extension should make a bridge between the current VSCode theme and the Lab variables.

[flying-sheep]

I see, so this is really just a missing feature in this extension.

The extension should define all these variables similar to how it’s done in this: #7161 (comment)

[alimantu]

I would love to see this one available in a newer version.

@DonJayamanne, how can I support this feature so it goes into development?

[bjornasm]

Is there any progress here?

[kevinjohncutler]

Would love to see this too