Dark theme broken when notebook contains widgets in metadata

[cnydw]

I followed the guide on https://blog.jupyter.org/the-templating-system-of-nbconvert-6-47ea781eacd2 to convert my notebooks to HTML with dark theme, using

jupyter nbconvert xleaflet.ipynb --to html --HTMLExporter.theme=dark

However some of the converted notebooks have the dark theme style for about 0.5 second, then the HTML page turns to the white theme automatically.
After some investigation I found out that it's only happening to the notebooks with widgets state in the metadata, which makes nbconvert add the following code snippet to the HTML page,

nbconvert/share/jupyter/nbconvert/templates/base/jupyter_widgets.html.j2

Lines 3 to 26 in 2e41429

	<script>
	(function() {
	function addWidgetsRenderer() {
	var mimeElement = document.querySelector('script[type="application/vnd.jupyter.widget-view+json"]');
	var scriptElement = document.createElement('script');
	var widgetRendererSrc = '{{ widgets_cdn_url }}@jupyter-widgets/html-manager@{{ html_manager_semver_range }}/dist/embed-amd.js';
	var widgetState;
	// Fallback for older version:
	try {
	widgetState = mimeElement && JSON.parse(mimeElement.innerHTML);
	if (widgetState && (widgetState.version_major < 2 || !widgetState.version_major)) {
	widgetRendererSrc = '{{ widgets_cdn_url }}jupyter-js-widgets@*/dist/embed.js';
	}
	} catch(e) {}
	scriptElement.src = widgetRendererSrc;
	document.body.appendChild(scriptElement);
	}
	document.addEventListener('DOMContentLoaded', addWidgetsRenderer);
	}());
	</script>

which in turn breaks the dark theme by updating the CSS properties.

Nbconvert version:

6.0.7

[italodamato]

I have the same issue. Did you find a workaround? @cnydw

[martinRenou]

I suspect this is an issue with ipywidgets itself: jupyter-widgets/ipywidgets#3340, we should probably close this issue