Last active
February 16, 2022 23:02
-
-
Save marcolaux/c0c3441f8dde40b1d698406460ee0f76 to your computer and use it in GitHub Desktop.
Joplin VSCode inspired theme
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
/* | |
@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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment