Make Jupyter Notebook your own: Change background and icons

This is my first post to Qiita. This is an article on how to change the theme such as background, text color, and icon of Jupyter Notebook on Windows. ~~ I want a Mac book ~~

Purpose

Use the convenient Jupyter Notebook as your own coloring and background.

environment

--Windows 10 (even 7)

• Google Chrome --Anaconda3 version 1.4.0? ~~ Maybe ~~ --Jupyter Notebook version 4.1.0? ~~ Maybe ~~

Jupyter Notebook is nice, isn't it?

I started studying machine learning in earnest (?) From this spring of 2016, but now I'm touching Python, and I'm also touching the convenient Jupyter Notebook from IPython. wonderful. Jupyter Notebook. However, don't you get tired if the screen color is whitish?

~~ Ah ~ Mabushi ~~~

When I searched for Jupyter Notebook to work with browser software (?), I found that it could be tampered with with html or css. There is. However, it didn't work with my Windows. Especially in the notebook where the program is executed. Even if I searched, it seems that it has not been solved if I am using Windows, so I thought that there are many people who are in trouble, so I decided to write it in Qitta, which is taken care of without putting it in a memo.

I don't know where the CSS file is

You can also check by pressing F12 <link rel="stylesheet" href="/static/notebook/css/override.css?v=31167f96aa4a3bc95ad24680a64a7ffd" type="text/css"> <link rel="stylesheet" href="/custom/custom.css" type="text/css"> You can find something like ... ** Where ** Well, I don't know where it is because I'm so weak ... When I search the Windows menu, I get some ... ** Which ** I found it after all. ~~ Please let me know what CSS means what ~~

Specific method

~~ Unfortunately ~~ This is the method for Windows 7 and 10. Linux-based things will come out if you look it up on the net ...

1. First, open Explorer and use the address bar or command line. C: \ Users \ (your name) \ .jupyter \ custom will go. Probably there is no custom at first, so if not, create a custom folder.
2. Create a css file custom.css in the created custom folder. Open custom.css and describe the CSS you want to apply to the contents. You can see the attributes used in Jupyter Notebook by starting Jupyter Notebook and pressing F12 on the keyboard in Chrome.
3. But it's awkward, so some people are making nice things. https://github.com/nsonnad ~~ Is it okay to link to it without permission ... ~~ Download the CSS you like from here and copy and paste it to the CSS file you just created, the menu page of Jupyter Notebook Can be changed.
4. You can write Jupyter Notebook code by making another change to override.css in C: \ Users \ (your name) \ Anaconda3 \ Lib \ site-packages \ notebook \ static \ notebook \ css. You can overwrite the appearance of the page you want to run.

If it still doesn't change

It seems that the browser probably remembers the CSS file etc. without permission, and it seems that you have to delete it. With Chrome

1. Click on the three vertical bars in the upper right corner (or like a horizontal bar-) to open the history.
2. If you click on a place like Clear browsing history data ..., there will be Cached images and files, so check only that and delete it.

It may be cured by starting a new Jupyter Notebook in this way.

My Jupyter Notebook

I changed it like this. The background image was added to the CSS of the body tag. The Continuum Analytics logo adds my tail to Ouroboros (?) I liked it because it was cool and I changed it to my own color (I wonder if it's for personal use ... I'm cheating by drawing a line. ..). Also include the handle name. Images can be replaced like this. C: \ Users \ (your name) \ Anaconda3 \ Lib \ site-packages \ notebook \ static \ base \ images I think it is in. The new reading of favicon.ico also doesn't change unless you clear the cache you did above. I'm tired if the background isn't dark ...

Fine CSS for the background image is appropriate. It is the same as when modifying html. ~~ PyCharm can be used! Without!