Instantly share code, notes, and snippets.

Embed
What would you like to do?
Github Flavored Theme for Ipython/Jupyter Notebook

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.

img1 img1 img1

/*
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;
}
@neuraldude

This comment has been minimized.

Show comment
Hide comment
@neuraldude

neuraldude Apr 24, 2018

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;.

neuraldude commented Apr 24, 2018

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;.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment