@yeebc/jupyterlab_neon_theme/style/style.css

A flat, 80's neon inspired theme for JupyterLab 3.x.

/* Fix layout color */
body {
  line-height: 1.3077; /* 17px for 13px font */
}

#jupyterlab-splash.dark {
  background-color: var(--neon-night-bg0);
 }
 
.cm-s-jupyter .CodeMirror-activeline-background,
.cm-s-jupyter .CodeMirror-gutter, .lm-DockPanel-tabBar .lm-TabBar-tab,
.lm-DockPanel-tabBar .lm-TabBar-tab.lm-mod-current, 
.lm-DockPanel-tabBar .lm-TabBar-tab:hover:not(.lm-mod-current) {
   background-color: var(--jp-layout-color0);
 }

 body, .lm-DockPanel-tabBar, #jp-main-dock-panel, .lm-Menu, .jp-Tooltip{
   background-color: var(--jp-layout-color1);
 }

 .lm-MenuBar-item.lm-mod-active, 
 .lm-MenuBar.lm-mod-active .lm-MenuBar-item.lm-mod-active {
  background-color: #5d5b7b54;
 }

 #jp-main-dock-panel {
  background: transparent;
  padding: 4px;
 }
  
 .lm-Menu, .jp-Tooltip {
  border: 1px solid #2f2d43;
}

.f17wptjy {
  background-color: #181818;
 }

 /* Translucent area */
.jp-SideBar.lm-TabBar, #jp-top-panel {
   backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
 }

 .jp-SideBar .lm-TabBar-tab, .lm-MenuBar {
   background: unset !important;
 }


/* Brackets */
div.CodeMirror span.CodeMirror-matchingbracket {
  color: var(--neon-night-green0);
  border-bottom: 1px solid var(--neon-night-green0);
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
  color: var(--neon-night-red);
  border-bottom: 1px solid var(--neon-night-red);
}

/*Flat scrollbar */
/* width */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background:#5d5175;
  border-radius: 10px;
  min-height: 100px;
}

::-webkit-scrollbar-thumb:horizontal:hover, ::-webkit-scrollbar-thumb:horizontal:active {
  background: linear-gradient(to right, #fafc32, #f45959, #ef1eaf);
}

::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:vertical:active {
  background: linear-gradient(to bottom, #fafc32, #f45959, #ef1eaf);
}

.widget-slider .ui-slider {
  background: linear-gradient(to right, #fafc32, #f45959, #ef1eaf);
  border-radius: 4px;
}

/*Fix cursor of horizontal  scrollbar*/
.CodeMirror-hscrollbar {
  cursor: auto;
}

/* Fix notebook style */
.cm-s-jupyter span.cm-keyword {
  font-weight: normal;
}

.cm-s-jupyter span.cm-variable-2 {
  font-weight: bold;
}

.jp-Cell .jp-InputArea-editor {
  padding: 2px 0;
}

.jp-OutputArea-child .jp-RenderedImage.jp-OutputArea-output{
  text-align: center;
}

.jp-OutputArea-child .jp-OutputArea-output {
  margin-bottom: 3px;
  padding: var(--jp-code-padding);
  background-color: var(--neon-night-bg1);
  border-radius: 5px;
}

.jp-Cell, .jp-CodeConsole .jp-Cell {
  padding: 2px 0;
}

.jp-Cell.jp-MarkdownCell{
  margin-top: 8px;
}

.jp-CodeCell.jp-mod-outputsScrolled .jp-Cell-outputArea {
  box-shadow: none;
}

/* Notebook prompt */
.jp-InputPrompt {
  color: var(--neon-night-cyan);
  text-shadow: var(--neon-night-text-shadow0);
  padding-top: 8px;  /* Works well with 13px code size */
}

.jp-OutputPrompt {
  color: #ffc8e0;
  text-shadow: var(--neon-night-text-shadow1);
  padding-top: 6px;  /* Works well with 13px code size */
}

.jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-InputPrompt, 
.jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-OutputPrompt {
  text-shadow: none;
}

.jp-NotebookTools .jp-InputPrompt{
  padding-top: 8px;
}

/* Notebook collapser */
.jp-Cell .jp-Collapser:hover {
  box-shadow: none;
}

.jp-Cell .jp-Collapser {
  opacity: 0;
}

/* Neon off*/
.jp-Cell.jp-mod-active .jp-InputCollapser.jp-Cell-inputCollapser, 
.jp-InputCollapser.jp-Cell-inputCollapser.jp-Collapser, 
.jp-InputCollapser.jp-Cell-inputCollapser.jp-Collapser:hover{
  background: var(--neon-night-blue1);
}

.jp-Cell.jp-mod-active .jp-OutputCollapser.jp-Cell-outputCollapser,
.jp-OutputCollapser.jp-Cell-outputCollapser.jp-Collapser, 
.jp-OutputCollapser.jp-Cell-outputCollapser.jp-Collapser:hover{
  background: var(--neon-night-purple2);
}

.jp-Cell.jp-mod-active .jp-InputCollapser.jp-Cell-inputCollapser,
.jp-Cell.jp-mod-active .jp-OutputCollapser.jp-Cell-outputCollapser {
  transition: box-shadow cubic-bezier(0, 0.2, 0, 0.2) 0.5s, background cubic-bezier(0, 0.2, 0, 0.2) 0.5s;
  opacity: 1;
}

/* Neon on*/
.jp-Cell.jp-mod-active .jp-InputCollapser.jp-Cell-inputCollapser:hover {
  background: var(--neon-night-cyan);
  box-shadow: 0 0 1px, 0 0 15px #0225ff, 0 0 5px 0.1px #0225ff, inset 0 0 1px 0.2px #0225ff;
}

.jp-Cell.jp-mod-active .jp-OutputCollapser.jp-Cell-outputCollapser:hover {
  background: #ffc8e0;
  box-shadow: 0 0 1px, 0 0 15px #c10165, 0 0 5px 0.1px #c10165, inset 0 0 1px 0.2px #c10165;
}

span.cm-keyword {
  transition: text-shadow cubic-bezier(0, 0.2, 0, 0.2) 0.2s;
}

span.cm-keyword:hover {
  text-shadow: var(--neon-night-text-shadow0);
}

/* Let's lit neon in the presentation mode~ */
.jp-mod-presentationMode .jp-Notebook span.cm-keyword {
  text-shadow: var(--neon-night-text-shadow0);
}

/* Console */
.jp-CodeConsole-content .jp-Cell .jp-Collapser:hover {
  opacity: 1;
  box-shadow: none;
}

.jp-ConsolePanel::before {
  border-bottom: none;
  box-shadow: none;
}

/* Top, side, bottom bar */
#jp-top-panel {
  border-bottom: 1px solid #000;
}

#jp-menu-panel {
  background: none;
}

.jp-SideBar .lm-TabBar-tab:not(.lm-mod-current) .jp-icon3[fill] {
  fill: var(--jp-inverse-layout-color4);
}

.jp-SideBar .lm-TabBar-tab.lm-mod-current .jp-icon3[fill]{
  fill: var(--jp-inverse-layout-color2);
}


.jp-SideBar .lm-TabBar-tab:hover:not(.lm-mod-current) .jp-icon3[fill]{
  fill: var(--jp-inverse-layout-color2);
}

.lm-CommandPalette-itemLabel > mark{
  color: var(--neon-night-cyan);
}

/* Line numbers */
.CodeMirror-gutters {
  border-right: none;
}

.CodeMirror-linenumber {
  padding: 0 16px;
}

.jp-Notebook  .CodeMirror-linenumber{
  padding: 0 16px 0 8px;
}

/* Notebook tab bar */
.lm-DockPanel-tabBar {
  background: transparent;
}

.lm-DockPanel-tabBar .lm-TabBar-tab {
  margin-left: 2px;
  transition: text-shadow cubic-bezier(0, 0.2, 0, 0.2) 0.2s, color cubic-bezier(0, 0.2, 0, 0.2) 0.2s, 
  opacity 0.2s;
}

.lm-DockPanel-tabBar .lm-TabBar-tab.jp-mod-current:before {
  top: auto;
  bottom: calc(-1 * var(--jp-border-width));
  height: 1.5px;
} 

.lm-DockPanel-tabBar .lm-TabBar-tab.lm-mod-closable > .lm-TabBar-tabCloseIcon {
  opacity: 0;
}

.lm-DockPanel-tabBar .lm-TabBar-tab.lm-mod-closable:hover:not(.lm-mod-current) > .lm-TabBar-tabCloseIcon,
.lm-DockPanel-tabBar .lm-TabBar-tab.lm-mod-closable.lm-mod-current  > .lm-TabBar-tabCloseIcon {
  opacity: 1;
}

.jp-Toolbar {
  padding: 0;
  z-index: 10;
}

.jp-Toolbar.jp-NotebookPanel-toolbar {
  padding: 2px 0;
}


.lm-DockPanel-tabBar .lm-TabBar-tab:hover:not(.lm-mod-current), 
.lm-DockPanel-tabBar .lm-TabBar-tab.lm-mod-current, h1 {
  color: #ffeef6;
  text-shadow: 0 0 2px #b33576, 0 0 6px #6b2e4e, 0 0 6px #6b2e4e, 2px 2px 1px #000;
  opacity: 1;
}

.lm-DockPanel-tabBar .lm-TabBar-tab {
  opacity: 0.6;
}

/* Search panel */
.jp-DocumentSearch-overlay {
  margin: 16px 16px 0 0;
}

.jp-DocumentSearch-overlay, .jp-DocumentSearch-overlay-row:first-of-type, 
.bp3-input-group.filter {
  border: 1.5px solid #eb244f;
  box-shadow: 0 0 5px 0 #951430, 0 0 10px 0px #951430, inset 0 0 5px 1px #951430;
}

.jp-DocumentSearch-overlay-row {
  margin-bottom: 0;
}

.jp-DocumentSearch-overlay-row:first-of-type {
  padding: 2px;
}

.jp-DocumentSearch-input, .filter .bp3-input{
  color: var(--neon-night-green0);
  text-shadow: 0 0 5px #23854e, 0 0 5px #23854e, 0 0 2px #23854e;
}

.jp-DocumentSearch-index-counter {
  font-size: 14px;
  color: #ffa666;
  text-shadow: 0 0 5px #854c23, 0 0 5px #854c23, 0 0 2px #854c23;
}

.jp-InputGroupAction {
  padding: 5px;
}

/*Rendered text*/
.jp-RenderedText pre {
  color: #dedede;
}

.jp-RenderedText pre .ansi-red-fg,
.jp-RenderedText pre .ansi-red-bg {
  color: var(--neon-night-red);
}

.jp-RenderedText pre .ansi-red-intense-fg, 
.jp-RenderedText pre .ansi-red-intense-bg {
  color: var(--neon-night-red);
}

.jp-RenderedText pre .ansi-blue-fg, 
.jp-RenderedText pre .ansi-blue-bg {
  color: var(--neon-night-purple1);
}

.jp-RenderedText pre .ansi-blue-intense-fg, 
.jp-RenderedText pre .ansi-blue-intense-bg {
  color: var(--neon-night-blue0);
}

.jp-RenderedText pre .ansi-green-fg, 
.jp-RenderedText pre .ansi-green-bg {
  color: var(--neon-night-purple3);
}

.jp-RenderedText pre .ansi-green-intense-fg, 
.jp-RenderedText pre .ansi-green-intense-bg {
  color: var(--neon-night-purple2);
}

.jp-RenderedText pre .ansi-yellow-fg, 
.jp-RenderedText pre .ansi-yellow-bg {
  color: var(--neon-night-orange);
}

.jp-RenderedText pre .ansi-yellow-intense-fg, 
.jp-RenderedText pre .ansi-yellow-intense-bg {
  color: var(--neon-night-pink);
}

.jp-RenderedText pre .ansi-cyan-fg, 
.jp-RenderedText pre .ansi-cyan-fg {
  color: var(--neon-night-yellow);
}

.jp-RenderedText pre .ansi-cyan-intense-fg, 
.jp-RenderedText pre .ansi-cyan-intense-bg {
  color: var(--neon-night-cyan);
}

.jp-RenderedText pre .ansi-magenta-fg, 
.jp-RenderedText pre .ansi-magenta-fg {
  color: var(--neon-night-peach);
}

.jp-RenderedText pre .ansi-magenta-intense-fg, 
.jp-RenderedText pre .ansi-magenta-intense-bg {
  color: var(--neon-night-purple0);
}

.jp-DirListing-item.jp-mod-running .jp-DirListing-itemIcon:before {
  color: var(--neon-night-green0);
}

#setting-editor .jp-SettingsRawEditor .jp-Toolbar {
  padding: 4px;
}

#setting-editor .jp-PluginList li:hover {
  border-color: transparent;
}