Github Flavored Theme for Ipython/Jupyter Notebook

A Github Flavored Theme for Ipython or Jupyter Notebook.md

Github Flavored Theme for Ipython/Jupyter Notebook

Put custom.css in .jupyter/custom/ (if you are running recent version of Jupyter).

Note: Tested only on Chrome. Let me know if something is not working.

custom.css

/*
    Name:       Github Flavored
    Author:     aahoo
    
    Based on previous works of:
    CodeMirror template adapted for IPython Notebook by Nikhil Sonnad (https://github.com/nsonnad/base16-ipython-notebook)
    CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-chrome-devtools)
    Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
*/


/* UNCOMMENT THIS TO HIDE THE HEADER */

div#header-container {
  display: none !important;
}

/* UNCOMMENT THIS TO HIDE THE TOOLBAR
div#maintoolbar {
  display: none !important;
} 
*/


/* GLOBALS */

* {
  line-height: 1.5;
  color: #333;
}
a {
  color: #4078c0;
}
.rendered_html a:link,
a:link {
  text-decoration: none;
}
body,
.CodeMirror {
  font-family: Roboto, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
body.notebook_app {
  background-color: white;
}
.container {
  max-width: 768px;
}
div.code_cell .CodeMirror,
.cm-s-default .cm-comment,
.prompt,
code,
kbd,
pre,
samp {
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

/* INTRO PAGE */

div.list_container {
  border-radius: 0;
}
div.list_container > div {
  border-bottom: none;
}

/* NOTEBOOK */

div.navbar-default {
  border: none;
  background-color: transparent;
}
body > #header {
  background-color: #f7f7f7;
}
body > #header .header-bar {
  display: none;
}
div#notebook {
  border-top: none;
}
#menubar {
  margin-top: 0;
}
div#notebook-container {
  padding: 0;
  box-shadow: none;
}
.notebook_app > #header {
  box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.5);
}

/* input cell */

div.input {
  flex-direction: column;
}
div.input_prompt {
  color: #a71d5d;
  border: none;
}
div.input_area {
  border-radius: 0;
  border: none;
  background-color: #f7f7f7;
  box-shadow: 0 0, inset 0 0 0 1px #eee;
}

/* output cell */

div.output_area {
  flex-direction: column;
  border-bottom: 1px dashed #ddd;
}
div.output_subarea {
  padding: 5px;
  padding-left: 10px;
}
div.output_prompt {
  color: #666;
}
div.output_text {
  line-height: inherit;
}
div.output_stderr {
  background-color: transparent;
}
div.output_scroll {
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.8);
}
div.output_collapsed {
  margin-top: 5px;
  padding: 10px;
  background: center url('data:image/svg+xml;utf8,<svg fill="#bbb" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat;
  text-indent: -9999px;
  border-radius: 0;
  border: none;
  transition: all 0.2s ease-in-out;
}
div.output_collapsed:hover,
div.output_collapsed:active {
  background: center url('data:image/svg+xml;utf8,<svg fill="#999" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat;
  background-color: rgba(0, 0, 0, .1);
  box-shadow: inset 0 0 0 1px #ccc;
}
div.out_prompt_overlay {
  height: auto;
  width: 18px;
  left: -10px;
  top: 5px;
  bottom: 5px;
  padding: 0!important;
  box-shadow: none !important;
  transition: all 0.2s ease-in-out;
}
div.out_prompt_overlay:hover {
  background-color: rgba(0, 0, 0, .1);
  box-shadow: inset 0 0 0 1px #ccc!important;
}
div.out_prompt_overlay:active {
  background-color: rgba(0, 0, 0, .2);
}

/* rendered html cell (mostly) */

.rendered_html h1,
.rendered_html h2,
.rendered_html h3,
.rendered_html h4,
.rendered_html h5,
.rendered_html h6,
.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6 {
  font-family: inherit;
  line-height: inherit;
  font-weight: 300;
}
.rendered_html h1:first-child,
.rendered_html h1,
.rendered_html h2,
.rendered_html h3,
.rendered_html h4,
.rendered_html h5,
.rendered_html h6 {
  margin-top: .5em;
}
.rendered_html h1,
.cm-header-1 {
  font-size: 300%;
}
.rendered_html h2,
.cm-header-2 {
  font-size: 200%;
}
.rendered_html h3,
.cm-header-3 {
  font-size: 150%;
}
.rendered_html h4,
.cm-header-4 {
  font-size: 125%;
}
.rendered_html h5,
.cm-header-5 {
  font-size: 110%;
}
.rendered_html h6,
.cm-header-6 {
  font-size: 100%;
}
.rendered_html table,
.rendered_html th,
.rendered_html tr,
.rendered_html td {
  border: 1px #333 solid;
}
table.dataframe tr {
  border: 1px #ddd;
}

/* mixed cells */

div.cell {
  width: auto;
  /*margin-bottom: 5px;*/
}
div.cell.text_cell + div.cell.text_cell {
  /* to reduce the margin between two text cells */
  margin-top: -10px;
}
div.cell,
.edit_mode div.cell,
div.cell.selected,
.edit_mode div.cell.selected,
div.cell.jupyter-soft-selected,
div.cell.selected.jupyter-soft-selected {
  border: none;
  border-radius: 0;
  margin: 5px;
  padding: 10px;
  padding-left: 10px;
  background: none;
  overflow-x: auto;
  transition: all 0.2s ease-in-out;
}
div.cell.selected,
div.cell.jupyter-soft-selected,
div.cell.selected.jupyter-soft-selected {
  box-shadow: 0 0 5px #333;
  background: #fff;
}
.edit_mode div.cell.selected {
  box-shadow: 0 0 5px #a71d5d;
}
div.rendered_html,
div.CodeMirror-lines {
  padding: 3px;
}
.edit_mode div.cell.selected .input_area {
  background: none;
}
div.code_cell .CodeMirror {
  font-size: 13px;
}
div.code_cell,
div.output_text {
  font-size: 13px;
}
div.prompt {
  min-width: auto;
  padding: 5px 5px 5px 0;
  line-height: inherit;
  text-align: left;
  border-radius: 0;
}
div.text_cell > div.prompt {
  display: none;
}
div.timing_area {
  border-top: dashed 1px #e8e8e8;
  text-align: right;
}

/* cell toolbar */

.celltoolbar {
  border: none;
  background: transparent;
}
.ctb_global_show .ctb_show ~ div.text_cell_render {
  border: none;
}

/* style python code syntax */

div.CodeMirror span.CodeMirror-matchingbracket {
  color: #333 !important;
  box-shadow: inset 0px 0px 1px #ed6a43;
  border-radius: 2px;
}
.cm-s-ipython .CodeMirror-gutters {
  background-color: transparent;
  border-right: solid 1px #ddd;
  color: rgba(0, 0, 0, 0.3);
}
.cm-s-ipython .CodeMirror-linenumber {
  color: rgba(0, 0, 0, 0.3);
}
.cm-s-ipython span.cm-number {
  color: #0086b3;
}
.cm-s-ipython span.cm-property,
.cm-s-ipython span.cm-attribute {
  color: #689c00;
}
.cm-s-ipython span.cm-keyword {
  color: #a71d5d;
}
.cm-s-ipython span.cm-string {
  color: #183691;
}
.cm-s-ipython span.cm-operator {
  color: #a71d5d;
}
.cm-s-ipython span.cm-builtin {
  color: #0086b3;
}
.cm-s-ipython span.cm-variable {
  color: #333;
}
.cm-s-ipython span.cm-variable-2 {
  color: #ed6a43;
}
.cm-s-ipython span.cm-def {
  color: #795da3;
}
.cm-s-ipython span.cm-error {
  background: #e00;
  color: #fff!important;
}
.cm-s-ipython span.cm-bracket {
  color: #49483e;
}
.cm-s-ipython span.cm-comment {
  color: #999;
}
.cm-s-ipython span.cm-tag {
  color: #183691;
}
.cm-s-ipython span.cm-atom {
  color: #183691;
}

/* markdown style */

.cm-s-default .cm-tag {
  color: #183691;
}
.cm-s-default .cm-comment {
  color: #0086b3;
}
.cm-s-default .cm-string {
  color: #4078c0;
}
.cm-s-default .cm-link {
  color: #183691;
}
.cm-s-default .cm-header {
  color: #1d3e81;
}
.cm-s-default .cm-quote {
  color: #183691;
}

/* error in output */

span.ansiblack {
  color: #333;
}
span.ansiblue {
  color: #183691;
}
span.ansigray {
  color: #807d7c;
}
span.ansigreen {
  color: #3f8600;
}
span.ansipurple {
  color: #a71d5d;
}
span.ansired {
  color: #ed6a43;
}
span.ansiyellow {
  color: #e0b700;
}
span.ansicyan {
  color: #0086b3;
}

I really love this theme, however I am getting unnecessary scrollbars to the right of every cell in my notebook, in both Chrome and Firefox. It seems that cells are placed within containers that are just a bit smaller than themselves. Is there a way to correct this behavior? I don't see it in the screenshots for this theme.

Update: Never, mind, I got the problem to go away by commenting out overflow-x: auto;.

Thank you for sharing a wonderful theme. @aahoo
I had the same problem as @neuraldude. Thank you for fix that

I want to remove a small space in the right part of the result window
Does anyone know what to do..?

This is great. Thank you for sharing it.