View on GitHub

Jupyter-Notebook-Atom-Scheme

A dark-only theme for the Jupyter Notebook interface

:art: :dark_sunglasses: Jupyter-Notebook - Dark Scheme

This is was a completely dark theme for the Jupyter Notebook interface.

Actually… don’t use this! Use Jupyter-Themes instead!

Jupyter-Themes is purely awesome :sparkles:!

Here is the theme I use:

$ jt -N -T -f firacode -tf loraserif -nf latosans -fs 95 -tfs 12 -nfs 115 -cellw 85% -t grade3

It keeps the Name & Logo visible (-N),
It keeps the Toolbar visible (-T),
It uses the awesome Fira Code font for monospace font (code etc). Some ligatures are supported in CodeMirror (Jupyter’s text editor), but not all,
It uses the Lora Serif and Lato Sans fonts as serif and sans-serif fonts (I like them both),
It uses a font-size of 95% (enough on large screen) (-fs 95),
It uses a text font-size of 12pt and a notebook fontsize of 115% (increase text cells) (-tfs 12 -nfs 116),
It reduces the cell width to 85% (-cellw 85%),
And uses the other settings from the grade3 theme (-t grade3).

It looks amazing :art: :sparkles:!

screenshots/demo_jt1.png

Palette command: screenshots/demo_jt2.png

Code cells:

screenshots/demo_jt3.png

Note: You can use this custom.css file and my matplotlibrc file (to save in ~/.matplotlib/) if you don’t want to install Jupyter-Themes.

Example

screenshots/demo1.png

Note: Source code coloring is based on the Twilight theme for Textmate. Print preview output for notebooks retains a white background with printable foreground colors.

Installing

To install this theme, copy or symlink this file custom.css into the folder ~/.jupyter/custom/.

mkdir -p ~/.jupyter/custom/
cd ~/.jupyter/custom/

If needed, edit it as you wish:

nano custom.css

Then, whenever you run jupyter notebook (for Python or other languages) it will use this theme.

You can try with the test notebook.

Screenshots

Here are a few more examples:

Editing Markdown cells works fine:

screenshots/demo3.png

The selected cell is dark gray (and not white, that was my reason to fork this initial project):

screenshots/demo4.png

The menus have all joined the dark side also:

screenshots/demo5.png

Print preview still has the normal style with white background:

screenshots/demo6.png

Tips

Most of the coloring information can be modified manually. Just try to stay consistent!

For more information on color code see this website.