CODEWITHSUNDEEP
pythonhtmljupyter-notebookjupyternbconvert
kyle chan
kyle chan

Reputation: 361

Jupyter Notebook exported HTML dark color

I am using JupyterLab with light theme and when I exported my notebook as HTML I saw this: background color is dark and codes are in weird colors

What I am expecting to see is something like this: background color is white

any ideas of the setting ?

Upvotes: 12

Views: 8121

Answers (3)

MAFiA303
MAFiA303

Reputation: 1317

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"

enter image description here

Upvotes: 8

Fanchen Bao
Fanchen Bao

Reputation: 4279

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:

Without styling change, wrongly rendered

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

With styling change, correctly rendered

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

Upvotes: 0

Rafael Marino
Rafael Marino

Reputation: 76

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

Upvotes: 5

Related Questions