Customizing Jupyter Notebook appearance with the custom.css file

Jupyter Notebooks, previously IPython Notebook, is a smooth interface for exploratory programming. It allows for line by line execution with the addition of some great visualization of results.   It is not a great default IDE but serves its niche well. There are many kernels supported, including Python, R, Scala, C++.

To get started with Jupyter notebooks follow the  installation instructions here.

This post is focused on changing the aesthetics of your notebook. When I was starting with IPython I was working long hours through the Data Incubator‘s course work. My eyes seemed to suffer from the white screens for so many hours.  Example below:


We can customize the custom.css file at ~/.jupyter/custom/custom.css to get an appearance in line with our preferences.

I prefer snagging the great themes other’s skilled in CSS have been kind enough to provide. I’m currently using a Oceans16.css created by Kyle Dunovan. Example Below:


Searching ‘jupyter css themes’ offers a good selection of alternative styles.

If you’re using IPython, Damian Avila‘s 48-themes-for-your-ipython-notebook post was a great resource but the commands seem to be dated and require digging into the comments to address some things.

It is also possible to customize the key bindings in Jupyter Notebooks, very useful for say adding a hotkey for moving cells up and down. I haven’t dug into this yet  but hope to post about it soon.

Please leave a comment below if you feel this post is lacking in some way. I’m always learning myself and happy to learn from others.

Leave a Reply

Your email address will not be published. Required fields are marked *