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.
Last active
May 20, 2022 09:02
-
-
Save aahoo/e8ed425759711ead1ef7e7a3332dcd2d to your computer and use it in GitHub Desktop.
Github Flavored Theme for Ipython/Jupyter Notebook
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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; | |
| } |
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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;.