Jupyter Notebook exported HTML dark color

Question

I am using JupyterLab with light theme and when I exported my notebook as HTML I saw this:

What I am expecting to see is something like this:

any ideas of the setting ?

Answer 1

I had the exact same issue. After a couple hours debugging I realized it had to do (for me at least) with the jupyter-theme library. I had a dark theme installed, and I think nbconverter uses whichever settings your jupyter is also using, so the dark settings were affecting the html conversion.

Solution was simply to restore defaults with: $ jt -r

If that doesn't work, then refer to this thread: https://github.com/dunovank/jupyter-themes/issues/86

Answer 2

I encountered the same problem. Not only did the rendered html have a dark background, which made the x and y axis labels and ticks unreadable (they are black in color), but it also had weird alignment between blocks.

Although I do not know how to remedy it programmatically, I did find a work around.

1. Go to the official jupyter lab online playground.
2. Choose Try Jupyter Lab
3. Export Lorentz.ipynb (or any .ipynb file). You will find that this Lorentz.html is rendered correctly.
4. Replace the body and title of Lorentz.html with the body of your incorrectly-rendered html file old_foo.html (essentially, we are using Lorentz.html's styling for old_foo.html's body).
5. Rename Lorentz.html as new_foo.html. Open new_foo.html and you will find that it is correctly rendered.

If you run a diff between new_foo.html and old_foo.html, you will see that the difference is in one big chunk of styling code.

I am not sure whether this is a config error on my end or a bug in jupyter lab.

--

$ jupyter --version
jupyter core     : 4.6.3
jupyter-notebook : 6.0.3
qtconsole        : not installed
ipython          : 7.14.0
ipykernel        : 5.3.0
jupyter client   : 6.1.3
jupyter lab      : 2.1.3
nbconvert        : 5.6.1
ipywidgets       : not installed
nbformat         : 5.0.6
traitlets        : 4.3.3

Vanila HTML exported from jupyter lab:

Replace styling with that from jupyter lab's online playground:

Update

This hack no longer works in the following jupyter version:

╰─$ jupyter --version
jupyter core     : 4.6.3
jupyter-notebook : 6.1.4
qtconsole        : not installed
ipython          : 7.18.1
ipykernel        : 5.3.4
jupyter client   : 6.1.7
jupyter lab      : 2.2.8
nbconvert        : 6.0.6
ipywidgets       : not installed
nbformat         : 5.0.7
traitlets        : 5.0.4

Answer 3

from the command line run:

jupyter nbconvert --execute --to html /path/to/example.ipynb --HTMLExporter.theme=dark

adding --execute guarantees that plots are rendered before saving.

you can use Plotly dark theme to have plots black as well

import plotly.io as pio
pio.templates.default = "plotly_dark"