Skip to content

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.

Copy link

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

@Hobeam

This comment has been minimized.

Copy link

commented Jul 2, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.