/* Dark theme for Jupyter Notebook/iPython 4 Author: Theodore Pak Repo at: https://github.com/powerpak/jupyter-dark-theme Inspired by and adapted from the following: Base16 for iPython Notebook (https://github.com/nsonnad/base16-ipython-notebook) Base16 Twilight Dark, David Hart (http://hart-dev.com) CodeMirror template adapted for IPython Notebook by Nikhil Sonnad (https://github.com/nsonnad/base16-ipython-notebook) CodeMirror template by Jan T. Scott (https://github.com/idleberg/base16-chrome-devtools) Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ body, body.notebook_app.command_mode { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* SET THE CODE/MONOSPACE FONT I prefer Bitsream Vera Sans Mono, which is freely downloadable here: http://www.dafont.com/bitstream-vera-mono.font However, there are plenty of alternatives at http://programmingfonts.org/ in which case, add your preferred font to the stack below. */ .CodeMirror pre.CodeMirror-line, .CodeMirror-dialog, .CodeMirror-dialog .CodeMirror-search-field, .terminal-app .terminal { font-family: "SF Mono", "Bitstream Vera Sans Mono", Monaco, monospace; font-size: 10pt; } .terminal-app .terminal { line-height: 1.3em; } div.output pre, div.output code, .rendered_html pre, .rendered_html code, div.completions select, div.container pre { font-family: "SF Mono", "Bitstream Vera Sans Mono", Monaco, monospace; } div.output pre, div.output code, .rendered_html pre, .rendered_html p code, div.completions select, div.container pre, .rendered_html li code { font-size: 10pt; } div.prompt, div.tooltiptext pre { font-family: "SF Mono", "Bitstream Vera Sans Mono", Monaco, monospace; font-size: 9pt; } div.input_area { border-color: rgba(0, 0, 0, 0.10); background: rbga(0, 0, 0, 0.5); } /* GLOBALS */ @media not print { body.notebook_app { background-color: #111; } } a { color: #CF4A4C; } a:hover, a:focus { color: #DE6F71; } /* INTRO PAGE */ body[data-server-root], body[data-server-root] #header { background-color: #222; } body[data-server-root] #header-container { height: 0; } body[data-server-root] #header .header-bar { height: 0; } .tabbable { color: #979797; } .nav-tabs { border-bottom-color: #444; } .nav-tabs > li > a:hover, .nav > li > a:focus { background-color: #333; border-color: #222 #222 #555 #222; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { color: #979797; background-color: #444; border-top-color: #444; border-right-color: #444; border-left-color: #444; } .list_container { border-color: #444; } .list_container > div { border-bottom-color: #444; } .list_item:hover { background-color: #333; } .list_header { background-color: #444; } #notebook_list input[type="checkbox"] { opacity: 0.3; } #notebook_list input[type="checkbox"]:checked { opacity: 1; } .item_icon { color: #777; } .panel { border-color: #444; background-color: #222; } .panel-default > .panel-heading { border-color: #444; } #site .panel-group .panel .panel-heading { background-color: #444; } #running .panel-group .panel .panel-body .list_container .list_item { border-bottom-color: #444; } /* Dropdown menus */ .dropdown-menu { background: rgba(50, 50, 50, 0.95); color: #b7b7b7; } .dropdown-menu > li > a, .dropdown-submenu > a:after, .dropdown-menu > li > a:visited:after { color: #b7b7b7; } .dropdown-menu .divider { background-color: #444; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #fff; background-color: #444; } .dropdown-menu > li > a:hover:after, .dropdown-menu > li > a:focus:after, .dropdown-menu > li > a:active:after { color: #fff; } /* TERMINAL INTERFACE */ .terminal-app #site { background: #272727; } .terminal-app #header { display: none !important; } .terminal-app .terminal { background: #141414 !important; } /* NOTEBOOK AND EDITOR INTERFACE */ /* comment out the following line to unhide the toolbar */ div#maintoolbar { display: none !important; } /* Header UI styles */ body.notebook_app > #header { display: block !important; } .notebook_app > #header, .edit_app > #header { background-color: #333; color: #b7b7b7; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } .edit_app #menubar .navbar { margin-bottom: 0; } body > #header .header-bar { background: #444; } #header .navbar-brand { display: none; } #header .filename { margin-left: 0; margin-right: 2em; } #header .current_kernel_logo { width: 24px; height: 24px; } span.save_widget span.filename:hover { background: rgba(255, 255, 255, 0.15); color: #fff; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); } .navbar-default { background: transparent; color: #b7b7b7; border-color: #444; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #fff; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #fff; background-color: #444; } @media not print { .notebook_app #notebook { background: #111; } .notebook_app #notebook-container, .edit_app #texteditor-backdrop { background: #272727; } } /* Inverting the notebook editor UI */ .celltoolbar { border-color: #444; background: #444; color: #b7b7b7; } .ctb_global_show .ctb_show ~ div.text_cell_render { border-color: #444; } .celltoolbar select { opacity: 0.5; } .modal-dialog .modal-content, .popover, .popover .popover-title { background: rgba(50, 50, 50, 0.95); color: #b7b7b7; } .modal-header, .popover-title { border-bottom-color: #444; } .modal-footer { border-top-color: #444; } .modal-dialog .close { color: #fff; text-shadow: 0 1px 0 #000; } .modal-dialog .alert-info { background-color: #373E42; color: #d9edf7; } .popover.bottom > .arrow:after { border-bottom-color: #444; } .btn:focus, .btn:active:focus { outline: 5px auto rgba(102, 175, 233, 0.3); outline-offset: -1px; } .btn-default, #header .btn { background-color: #555; border-color: #222; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); color: #aaa; } .btn-default:focus, .btn-default:hover, #header .btn:focus, #header .btn:hover { background-color: #555; border-color: #222; box-shadow: 0 0 3px rgba(0, 0, 0, 0.8); color: #bbb; } .btn-default:active, .btn-default.active, #header .btn:active, .open > .dropdown-toggle.btn-default { background-color: #474747; color: #999; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); } .btn-default.disabled:focus, .btn-default.disabled:hover, .btn-default[disabled]:focus, .btn-default[disabled]:hover { background-color: #555; border-color: #222; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); color: #aaa; } .btn-default:active:hover, .btn-default:active:focus, #header.btn:active:hover, #header.btn:active:focus, .open > .dropdown-toggle.btn-default:hover, .open > .dropdown-toggle.btn-default:focus { background-color: #474747; color: #999; border-color: #222; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); } .btn-primary { color: #eee; background-color: #4481b7; border-color: #222; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } .btn-primary:focus, .btn-primary:hover { background-color: #4481b7; color: #fff; } .btn-primary:active { background-color: #306ea6; color: #ccc; } .btn-primary:active:hover, .btn-primary:active:focus { background-color: #306ea6; color: #ccc; } .form-control { background: #222; color: #eee; border-color: #777; } .form-control:focus { border-color: #458ac1; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.3); } .form-control::selection { background: rgba(221, 240, 255, 0.19); } #complete { border-color: #444; background: rgba(50, 50, 50, 0.95); color: #b7b7b7; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } .completions select { background: rgba(50, 50, 50, 0.95); color: #b7b7b7; } /* Set fonts and styles for outputted content */ div#notebook .text_cell_render { font-size: 16.25px; font-weight: 300; line-height: 1.25; } .rendered_html li p { margin-top: 1em; } .rendered_html ol ul, .rendered_html ul ul, .rendered_html ul ol { margin-top: 0em; } .rendered_html h1 { color: #CF4A4C; } div.output_html { font-family: sans-serif; } .notebook_app .rendered_html tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.05); } .notebook_app .rendered_html tbody tr:nth-child(odd):hover { background: rgb(51, 68, 81); } /* Outputted SVGs should assume a white background */ .output_svg div { background: white; } /* Set colors and styles that we only want on the screen, not for print */ /* In general, the .notebook_app selector restricts to the "live" notebook editor and not exported HTML versions */ @media not print { .notebook_app div.cell.running .input .input_area { border-left-color: #82591E; -webkit-animation-name: pulseBorder; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; } @-webkit-keyframes pulseBorder { from { border-left-color: #82591E; } to { border-left-color: #eea236; } } .notebook_app div.input_prompt {color: #9b703f;} .notebook_app div.output_prompt {color: #9b859d;} .notebook_app div.input_area { border-radius: 0px; border: 1px solid #464b50; } .notebook_app div.output_subarea { max-width: 100%; } .notebook_app div.output_area pre { font-weight: normal; color: #979797; } .notebook_app div.output_subarea { font-weight: normal; color: #979797; } .notebook_app div.output_stderr {background-color: #A0783C;} .notebook_app div.output_stderr pre {color: #eee;} .notebook_app .rendered_html table, .notebook_app .rendered_html th, .notebook_app .rendered_html tr, .notebook_app .rendered_html td { border: 1px #979797 solid; color: #979797; } .notebook_app div.text_cell_render, .notebook_app div.output_html { color: #979797; } .notebook_app table.dataframe tr { border: 1px #979797; } .notebook_app .rendered_html pre, .notebook_app .rendered_html code { border: 0; background-color: #444; color: #b0b0b0; padding: 0; } /* Scrollbars that match the dark theme of the "live" notebook editor */ .notebook_app div::-webkit-scrollbar { width: 12px; height: 12px; } .notebook_app body::-webkit-scrollbar-track, div::-webkit-scrollbar-track { background: transparent; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); border-radius: 12px; } .notebook_app body::-webkit-scrollbar-thumb, div::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.3); border-radius: 12px; border: 3px solid rgba(0, 0, 0, 0); background-clip: padding-box; } } /* Terminal text coloring */ .notebook_app span.ansi-black-fg, .notebook_app span.ansi-black-intense-fg { color: #323537; } .notebook_app span.ansi-blue-fg, .notebook_app span.ansi-blue-intense-fg { color: #afc4db; } .notebook_app span.ansi-gray-fg, .notebook_app span.ansi-gray-intense-fg { color: #838184; } .notebook_app span.ansi-green-fg, .notebook_app span.ansi-green-intense-fg { color: #8f9d6a; } .notebook_app span.ansi-purple-fg, .notebook_app span.ansi-purple-intense-fg { color: #9b859d; } .notebook_app span.ansi-red-fg, .notebook_app span.ansi-red-intense-fg { color: #cf6a4c; } .notebook_app span.ansi-yellow-fg, .notebook_app span.ansi-yellow-intense-fg { color: #f9ee98; } /* Code editing */ .CodeMirror {background: #141414; color: #F8F8F8;} div.CodeMirror-selected {background: rgba(221, 240, 255, 0.19) !important;} #texteditor-backdrop #texteditor-container .CodeMirror-gutter, .CodeMirror-gutters {background: #444; border-right: 0px; color: #777;} .CodeMirror-linenumber {color: #b4b7b4;} .CodeMirror-cursor {border-left: 1px solid #A7A7A7 !important; margin-top: -2px; min-height: 18px;} .CodeMirror span.cm-comment {color: #5F5A60; font-style: italic;} .CodeMirror span.cm-atom {color: #CF6A4C;} .CodeMirror span.cm-number {color: #CF6A4C;} .CodeMirror span.cm-property {color: #F8F8F8;} .CodeMirror span.cm-attribute {color: #198844;} .CodeMirror span.cm-keyword {color: #CDA869; font-weight: normal;} .CodeMirror span.cm-string {color: #8F9D6A;} .CodeMirror span.cm-string-2 {color: #E9C062;} /* regexp */ .CodeMirror span.cm-operator {color: #CDA869;} .CodeMirror span.cm-builtin {color: #A36AC7;} .CodeMirror span.cm-variable {color: #F8F8F8;} .CodeMirror span.cm-variable-2 {color: #7587A6;} .CodeMirror span.cm-variable-3 {color: #7587A6;} .CodeMirror span.cm-def {color: #9B703F;} .CodeMirror span.cm-error {color: #F8F8F8; background-color: rgba(86, 45, 86, 0.2);} .CodeMirror span.cm-bracket {color: #373b41;} .CodeMirror span.cm-tag {color: #7587A6;} .CodeMirror span.cm-link {color: #A36AC7;} .CodeMirror .CodeMirror-matchingbracket { background-color: #dd3; color: #303030 !important;} /* Markdown editing */ .cm-s-default span.cm-header {color: #CF4A4C;} .cm-s-default span.cm-variable-2 {color: #7587A6;} .cm-s-default span.cm-comment {color: #7F7A80;}