Custom skin for Jupyter notebooks

This is going to be a brief entry. Essentially: I have reading problems, which together with the strain induced by bad quality monitors (wish all were as good as the tiny screen of my Surface Pro), force me to look for ways to improve the quality of text I have to read on screen.

One problem for me as of late are Jupyter notebooks. Their default look in Windows involves narrow lines, bright background and sometimes too broad coding fonts, plus wasted space around prompts, line numbers, etc.

Fortunately, it seems you can customize the look of notebooks by touching one file. Follow these steps:

1. Guess the location of Jupyter's configuration. For that open a command line and type jupyter --config-dir That should output a directory such as E:\home\JuanJose\.jupyter
2. Create a file in that directory. More precisely, for my example, it will be E:\home\JuanJose\.jupyter\custom\custom.css
3. Enter some CSS styles in that file. I copy my own below.

The effects should be visible once you reload the notebook, even if a session is open.

/*
 * Comment out the following line if you have installed
 * the following fonts:
 *   - Source Code Pro,
 *     https://fonts.google.com/?selection.family=Source+Code+Pro
 *   - Vollkorn,
 *     https://fonts.google.com/specimen/Vollkorn
 */
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
@import url('https://fonts.googleapis.com/css?family=Vollkorn');
#notebook, div#notebook {
    font-family: 'Vollkorn', 'DejaVu Serif', 'Palatino Linotype', serif;
    font-size: 16px;
    line-height: 1.5;
}
h1,h2,h3,h4,h5,h6 {
    font-family: 'Palatino Linotype';
}
body {
    font-family: 'Verdana', 'Arial', sans-serif;
}
body, #notebook-container, body > #header, .btn-default {
    background-color: rgb(252,251,251);
}
li, .MathJax_Display {
    margin-bottom: 6px;
}
code, kbd, pre, samp, .CodeMirror {
    font-family: Source Code Pro;
    font-size: 12px;
}
pre {
    font-size: 11px;
}
.prompt {
    font-family: Arial;
    font-size: 11px;
    min-width: 6em;
}
.input-prompt {
    color: rgb(108, 119, 188);
}
.output-prompt {
    color: rgb(205, 129, 106);
}

Some screenshots of my new skin, with Windows Edge and Google Chrome. Windows Edge tends to increase the perceived weight of characters, which is not too bad in my case.