ipywidgets's HTMLManager package overrides the JupyterLab CSS in nbconvert

[martinRenou]

Description

ipywidgets's HTMLManager package seems to override JupyterLab CSS variables when loaded

Reproduce

1. Install nbconvert==6.4.0 and ipywidgets==7.6.5
2. Create a Notebook test.ipynb containing widgets
3. Convert the Notebook to HTML using a dark theme, using the following command:
   jupyter nbconvert --to html --HTMLExporter.theme=dark test.ipynb
4. Open the resulting HTML file with your browser, you should see the following:

theme.mp4

Expected behavior

The resulting HTML page should have a dark theme, ipywidgets should keep the CSS variables untouched when a theme is already loaded.

Ideally, ipywidgets wouldn't even ship those CSS variables.

Extra Context

It seems that, by chance, Voila is not impacted by this issue. I understand that the ipywidgets's control package CSS gets loaded before Voila loads the theme. But I might be wrong.
Voila is not impacted by this because it doesn't use HTMLManager.

[martinRenou]

Edited the title and issue summary. It seems that it's the HTMLManager that's bringing this CSS.

For the nbconvert case (HTML Manager):

ipywidgets/packages/html-manager/src/libembed.ts

Line 13 in 21ee990

import '@jupyter-widgets/controls/css/widgets.css';

For the classic Notebook case (widgetsnbextension)

ipywidgets/python/widgetsnbextension/src/extension.js

Line 210 in 9326d28

require('@jupyter-widgets/controls/css/widgets.css');

[martinRenou]

I wonder if we could have a conditional require that checks if the labvariables are already available in the page, if they are not, we require them.

[martinRenou]

Related issue: jupyter/nbconvert#1506