Joplin VSCode inspired theme

userchrome.css

/* 
@gray-dark: #1E1E1E;
@gray-medium: #252526;
@gray-light: #333333; 
@gray-lighter: #969696;

@white: #CCCCCC;
@unstyled: #AAAAAA;

@orange: #CE9178;
@orange-light: #D7BA7D;
@red: #F45385;
@blue-light: #569CD6;
@blue: #0E639C;
@green: #6A9955;
@green-light: #0DB374;
@yellow: #CBCB41;
@pink: #C586C0;
*/

:root {
    --joplin-appearance: dark !important;
    --joplin-background-color: #1e1e1e !important;
    --joplin-background-color-transparent: rgba(33,33,33,0.75) !important;
    --joplin-odd-background-color: #252525 !important;
    --joplin-color: #d4d4d4 !important;
    --joplin-color-error: #e6507f !important;
    --joplin-color-correct: #6ab785 !important;
    --joplin-color-warn: #ce9178 !important;
    --joplin-color-warn-url: #d7c9b9 !important;
    --joplin-color-faded: #3c3c3c !important;
    --joplin-color-bright: var(--joplin-color) !important;
    --joplin-divider-color: var(--joplin-odd-background-color) !important;
    --joplin-selected-color: #333333 !important;
    --joplin-url-color: #9cdcfe !important;
    --joplin-background-color2: #333333 !important;
    --joplin-color2: var(--joplin-color) !important;
    --joplin-selected-color2: #013F74 !important;
    --joplin-color-error2: #ff6c6c !important;
    --joplin-color-warn2: #ffcb81 !important;
    --joplin-background-color3: #2E3138 !important;
    --joplin-background-color-hover3: #4E4E4E !important;
    --joplin-color3: #dddddd !important;
    --joplin-background-color4: #1D2024 !important;
    --joplin-color4: #bea18a !important;
    --joplin-raised-background-color: #474747 !important;
    --joplin-raised-color: var(--joplin-color) !important;
    --joplin-search-marker-background-color: #F7D26E !important;
    --joplin-search-marker-color: black !important;
    --joplin-warning-background-color: #013F74 !important;
    --joplin-table-background-color: rgb(40, 41, 42) !important;
    --joplin-code-background-color: rgb(47, 48, 49) !important;
    --joplin-code-border-color: rgb(70, 70, 70) !important;
    --joplin-code-color: var(--joplin-color) !important;
    --joplin-block-quote-opacity: 0.7 !important;
    --joplin-code-mirror-theme: base16-dark !important;
    --joplin-code-theme-css: atom-one-dark-reasonable.css !important;
    --joplin-header-background-color: var(--joplin-background-color) !important;
    --joplin-text-selection-color: #e7ddd2 !important;
    --joplin-color-bright2: #D4D4D4 !important;
    --highlight-green: #7ba78a;
    --quote: #7f8c8d;
}

div, span, a{
  font-family: Cantarell, Roboto !important;
}

.icon-search,
.fa, .far, .fas{
  color: var(--joplin-color4) !important;
  font-family: "Font Awesome 5 Free" !important;
}


.CodeMirror.CodeMirror-wrap {
  background-color: var(--joplin-background-color) !important;
  color: var(--joplin-color);
}

#react-root > div > div{
  font-size: 16px !important;
  background-color: var(--joplin-background-color) !important;
}

#react-root > div > div > div input{
  font-size: 16px !important;
  background-color: var(--joplin-selected-color);
  border: none !important;
  margin-bottom: 0 !important;
}

#react-root > div > div > div input.title-input{
  height: 45px;
  padding: 8px 10px 8px 10px !important;
  background-color: var(--joplin-background-color) !important;
}
#react-root > div > div > div input.title-input:hover,
#react-root > div > div > div input.title-input:focus{
  background-color: var(--joplin-selected-color) !important;
}

#react-root > div > div .header{
  border: none !important;
  background-color: var(--joplin-odd-background-color);
}

#react-root > div > div .header .button{
  opacity: 0.5 !important;
}
#react-root > div > div .header .button:hover{
  opacity: 1 !important;
}
#react-root > div > div .header input{
  font-size: 14px !important;
  background-color: var(--joplin-selected-color) !important;
  border: none !important;
  margin: 0 !important;
  font-weight: normal !important;
}
.editor-toolbar{
  border: none !important;
  opacity: 0.5;
  background-color: var(--joplin-background-color) !important;
}
.editor-toolbar:hover{
  opacity: 1;
}
.editor-toolbar button{
  background-color: transparent !important;
}
.editor-toolbar .fa,
.editor-toolbar .far,
.editor-toolbar .fas{
  color: var(--joplin-color) !important;
}

.CodeMirror.CodeMirror-wrap .CodeMirror-code,
.item-list.note-list,
.item-list.note-list+div+div,
.list-item-container {
  border: none !important;
}

.item-list.note-list,
.list-item-container{
  background-color: var(--joplin-odd-background-color);
}


.sidebar,
.folders{
  background-color: var(--joplin-background-color) !important;
}
.sidebar > div:last-child{
  opacity: 0.33;
}
.sidebar > div:last-child button:hover{
  border-color: white;
  color: white;
}
.sidebar > div > div:not(.folders){
  opacity: 0.75;
}
.sidebar > div > div:not(.folders):hover{
  opacity: 1;
}

.sidebar > div:first-child > div:first-child{
  padding-top: 6px;
  padding-bottom: 0.75em;
}

.folders .list-item-container > *{
  opacity: 1 !important;
}

.folders .list-item-container .list-item{
  display: flex;
  justify-content: space-between;
}

.folders .list-item-container .list-item .title{
  color: var(--joplin-color) !important;
}

.folders .list-item-container .list-item .title:before{
  display: inline-block;
  color: var(--joplin-color4);
  font-weight: bold;
  padding-right: 6px;
}

.folders .list-item-container.list-item-depth-0 .list-item .title:before{
  content: '⬡';
}

.folders .list-item-container.list-item-depth-1 .list-item .title:before{
  content: '◻';
}

.folders .list-item-container.list-item-depth-2 .list-item .title:before{
  content: '◇';
}

.folders .list-item-container.list-item-depth-0.selected .list-item .title:before{
  content: '⬣';
}

.folders .list-item-container.list-item-depth-1.selected .list-item .title:before{
  content: '◼';
}

.folders .list-item-container.list-item-depth-2.selected .list-item .title:before{
  content: '◆';
}

.resizableLayoutItem.rli-sideBar > span > div{
  background-color: var(--joplin-odd-background-color) !important;
}
.resizableLayoutItem.rli-sideBar > span > div:hover{
  background-color: var(--joplin-selected-color) !important;
}

.resizableLayoutItem.rli-noteList > span > div{
  background-color: var(--joplin-background-color) !important;
}
.resizableLayoutItem.rli-noteList > span > div:hover{
  background-color: var(--joplin-selected-color) !important;
}

.resizableLayoutItem.rli-noteList > div:first-child > div:first-child > div:first-child{
  background: none !important;
}

.resizableLayoutItem.rli-noteList > div:first-child > div:first-child > div:first-child button{
  background-color: transparent !important;
}

.resizableLayoutItem.rli-noteList > div:first-child > div:first-child > div:first-child button span{
  color: var(--joplin-color) !important;
}

.resizableLayoutItem.rli-sideBar,
.resizableLayoutItem.rli-noteList{
  background-color: var(--joplin-odd-background-color) !important;
  font-weight: bold;
}

.resizableLayoutItem.rli-editor{
  background-color: var(--joplin-background-color) !important;
}

.resizableLayoutItem.rli-editor > div:first-child > div:first-child > div:first-child > div:nth-child(2) button{
  /* background-color: var(--highlight-green) !important; */
  height: 25px !important;
  min-height: 25px !important;
  min-width: none !important;
  padding: 0 8px !important;  
}

.resizableLayoutItem.rli-editor > div:first-child > div:first-child > div:first-child > div:nth-child(2) button span{
  font-size: 0.75em !important;
}

.resizableLayoutItem.rli-editor > div:first-child > div:first-child > div:first-child > div:nth-child(2) button span.icon-notebooks{
  font-size: 1em !important;
}

.resizableLayoutItem div.note-count-label{
  color: var(--joplin-color4) !important;
  font-weight: bold;
  background: transparent !important;
  opacity: 1 !important;
  padding-right: 10px;
}

.item-list.note-list .list-item-container{
  height: 40px !important;
  border-left: 2px solid transparent !important;
}
.item-list.note-list .list-item-container.selected{
  background-color: var(--joplin-selected-color) !important;
  border-left: 2px solid var(--highlight-green) !important;
}
.item-list.note-list div:before{
  border-bottom: 1px solid var(--joplin-background-color) !important;
}

.folders div:hover,
.item-list.note-list div:hover{
  background-color: var(--joplin-background-color2) !important;
}

.folders .list-item-container.selected{
  background: var(--joplin-selected-color) !important;
}


.codeMirrorEditor{
  color: var(--joplin-color) !important;
}

.CodeMirror.CodeMirror-wrap .CodeMirror-scroll {
  color: #DDDDDD;
}

.CodeMirror.CodeMirror-wrap .CodeMirror-gutters {
  background-color: var(--joplin-background-color);
  border-right: 1px dotted var(--joplin-odd-background-color);
}

.CodeMirror.CodeMirror-wrap .CodeMirror-linenumber {
  color: var(--joplin-selected-color);
  opacity: 1;
}

.CodeMirror.CodeMirror-wrap .CodeMirror-selected {
  background-color: darken(var(--joplin-selected-color), 0.4);
}

.CodeMirror.CodeMirror-wrap .CodeMirror-focused .CodeMirror-selected {
  background-color: var(--joplin-selected-color);
}

.CodeMirror.CodeMirror-wrap .CodeMirror-cursor {
  border-left: 1px solid #DDDDDD;
}

.CodeMirror.CodeMirror-wrap .CodeMirror-matchingbracket,
.CodeMirror.CodeMirror-wrap .CodeMirror-matchingtag {
  background: #252526 !important;
  border: 1px solid #969696 !important;
}

.CodeMirror.CodeMirror-wrap .CodeMirror-foldgutter-open:after {
  color: #969696;
}

.CodeMirror.CodeMirror-wrap .CodeMirror-foldgutter-folded:after {
  color: #969696;
}

.CodeMirror.CodeMirror-wrap .CodeMirror.over-gutter,
.CodeMirror.CodeMirror-wrap .CodeMirror-activeline .CodeMirror-foldgutter-open:after {
  color: #969696;
}

.CodeMirror.CodeMirror-wrap .CodeMirror-foldmarker {
  border-color: #969696;
  background-color: #969696;
  color: #DDDDDD;
}

.CodeMirror.CodeMirror-wrap .CodeMirror-linewidget img.inline-widget {
  background: rgba(0, 0, 0, 0.05);
}

.CodeMirror.CodeMirror-wrap .CodeMirror-searching {
  background-color: #CBCB41;
}

.CodeMirror.CodeMirror-wrap .CodeMirror-searching.searching-current-match {
  background-color: #CE9178;
}

.CodeMirror.CodeMirror-wrap .cm-formatting-list {
  font-weight: bold;
}

.CodeMirror.CodeMirror-wrap .cm-variable,
.CodeMirror.CodeMirror-wrap .cm-variable-2,
.CodeMirror.CodeMirror-wrap .cm-variable-3,
.CodeMirror.CodeMirror-wrap .cm-keyword{
  color: #DDDDDD;
  /* display: inline-block; */
}

.CodeMirror.CodeMirror-wrap .cm-variable{
  color: #B1DCFC;
}

.CodeMirror.CodeMirror-wrap .cm-atom{
  color: #CE9178;
}
.CodeMirror.CodeMirror-wrap .cm-variable-3 {
  color: #d9b6b6;
  /* font-weight: bold; */
}

.CodeMirror.CodeMirror-wrap .cm-keyword{
  color: #b1d9ca;
}

.CodeMirror.CodeMirror-wrap .cm-variable-2 {
  color: #afb8ef;
  /* font-weight: bold; */
}

.CodeMirror.CodeMirror-wrap .cm-url,
.CodeMirror.CodeMirror-wrap .cm-string-2,
.CodeMirror.CodeMirror-wrap .cm-hr {
  color: var(--highlight-green);
}

.CodeMirror.CodeMirror-wrap .cm-string{
  color: #CE9178;
}


.CodeMirror.CodeMirror-wrap .cm-url {
  text-decoration: underline;
  color: #569CD6;
}

.CodeMirror.CodeMirror-wrap .cm-number,
.CodeMirror.CodeMirror-wrap .cm-attribute,
.CodeMirror.CodeMirror-wrap .cm-plus {
  color: #569CD6;
}

.CodeMirror.CodeMirror-wrap .cm-def{
  color: #6995e5;
}
.CodeMirror.CodeMirror-wrap .cm-property {
  color: #DCDC9F;
}

.CodeMirror.CodeMirror-wrap .cm-operator,
.CodeMirror.CodeMirror-wrap .cm-meta,
.CodeMirror.CodeMirror-wrap .cm-bracket {
  color: #DDDDDD;
}

.CodeMirror.CodeMirror-wrap .cm-comment,
.CodeMirror.CodeMirror-wrap .cm-comment::first-letter {
  color: #6A9955;
  font-style: italic;
}

.CodeMirror.CodeMirror-wrap .cm-error,
.CodeMirror.CodeMirror-wrap .cm-minus {
  color: #F45385;
}

.CodeMirror.CodeMirror-wrap .cm-formatting-header {
  opacity: 0.3;
}

.CodeMirror.CodeMirror-wrap .cm-header {
  color: #D7BA7D;
}

.cm-rm-header-token{
  opacity: 0.25 !important;
}

.CodeMirror.CodeMirror-wrap .cm-link {
  color: #0E639C;
  text-decoration: none;
}

.CodeMirror.CodeMirror-wrap .cm-rangeinfo {
  color: #CE9178;
}

.CodeMirror.CodeMirror-wrap .cm-qualifier,
.CodeMirror.CodeMirror-wrap .cm-builtin,
.CodeMirror.CodeMirror-wrap .cm-tag {
  color: #CE9178;
}

.CodeMirror.CodeMirror-wrap .cm-quote {
  color: var(--quote);
  font-style: italic;
  opacity: 1;
}

.CodeMirror.CodeMirror-wrap .cm-quote.cm-url {
  color: var(--highlight-green);
  font-style: italic;
}

.CodeMirror.CodeMirror-wrap .cm-whitespace::before {
  color: #6A9955;
  opacity: 0.4;
}

.CodeMirror.CodeMirror-wrap .cm-formatting-quote,
.cm-formatting-strong,
.cm-formatting-em {
  opacity: 0.6;
}

.CodeMirror.CodeMirror-wrap .cm-strong,
.CodeMirror.CodeMirror-wrap .cm-strong::first-letter {
  color: #CE9178;
}

.CodeMirror.CodeMirror-wrap .cm-em {
  color: #CE9178;
}

.CodeMirror.CodeMirror-wrap .CodeMirror-code>div>pre>span::after,
.CodeMirror-line>span::after {
  color: #DDDDDD;
  opacity: 0.4;
}

.CodeMirror.CodeMirror-wrap .cm-inline-code {
  background: rgba(0, 0, 0, 0.02);
  color: #969696;
}

.CodeMirror.CodeMirror-wrap .gfm-codeblock-bg.CodeMirror-linebackground {
  background: rgba(0, 0, 0, 0.01);
}

.CodeMirror.CodeMirror-wrap .cm-table-sep,
.table-row.table-row-1 {
  color: #DDDDDD;
}

.CodeMirror-activeline-background,
.CodeMirror-activeline-gutter {
  background-color: fade(#252526, 70%) !important;
}

.CodeMirror-linebackground{
  background-color: var(--joplin-odd-background-color) !important;
}
.CodeMirror-linebackground+.cm-jn-code-block{
  padding: 0 1em !important;
}