Interaction of iwd.gui_style='ngl' with CSS when using jupyter-nbconvert --to html

[gph82]

Hello!

I'm having trouble sorting this one myself, and it might not be even an nglview issue but some jupyter notebook issue.

Version report at the bottom of the page.

Depending on using iwd.gui_style='ngl' or not, the appearance of the resulting html-page (when using jupyter-nbconvert --to html) changes in style (pics below). The notebook contains only the following cell:

import nglview
iwd = nglview.demo()
#iwd.gui_style = "ngl"
iwd

Steps are

1. Restart kernel, execute the cell
2. Menu Widget->Save Notebook Widget State
3. Externally run jupyter-nbconvert --to html notebook.ipynb
4. Open notebook.html in any browser
5. Uncomment iwd.gui_style = "ngl"
6. Repeat 1-4

Only happens in the html pages, the notebooks are okay:
notebook.html without iwd.gui_style = "ngl":

notebook.html with iwd.gui_style = "ngl"

In the second case, it first loads with white background, and then changes to dark (some seconds). Also, some fonts are rendered differently in the Markdown cells (not shown for clarity, can do so if needed)

I strongly suspect sth is going on with the CSS, but I'm way out of my depth here. Don't really get anywhere with F12 console and element-wise inspection.

Since I don't have access to other machines right now, I'd be happy if at least someone else can confirm.

Thanks!

Version report

• nglview 3.0.1+9.gd0a186b
• ipywidgets 7.6.1
• jupyter-nbconvert 7.6.1
• jupyter-notebook 6.0.7

[hainm]

hi @gph82 I don't know either. I will think about this. Sorry for my late reply. I don't know why github does not send notification to my email anymore. um.

[hainm]

I can reproduce the issue when view.gui_style = 'ngl'. And I think it's nglview issue due to this code:

nglview/nglview/theme/theme.py

Lines 83 to 85 in 4bab5ac

	def light(self):
	self._theme_css = _get_css_content('light.css') + _get_css_content('main.css')
	self._theme = 'light'

[gph82]

Hey, man, thanks a lot for looking into this, don't worry about the late reply 😉

I would not have found this alone, I think, but I can't really follow why this is a bug...why is it picking the dark theme if it only uses light.css and main.css?