userchrome.css

/* https://toolbox.mehvix.com/onedark */
/********************************************************************************/
/* One Dark                                                                     */
/* Latest Version:  https://github.com/Mehvix/joplin-onedark                    */
/* Created by:      Max Vogel (mehvix)                                          */
/*                                                                              */
/* userchrome.css:  For styling the entire Joplin app (except the rendered      */
/*                  Markdown, which is defined in `userstyle.css`)              */
/********************************************************************************/
div,
span,
a,
input {
  font-family: "PT Mono", monospace;
}

[title="Spell checker"],
.tag-bar *,
.modal-dialog *,
.dialog-root *,
table *,
span.updated-time-label,
div[style*="font-family: Roboto;"],
div.CodeMirror * {
  font-family: "PT Mono", monospace !important;
}

[class^=fa] {
  font-family: "Font Awesome 5 Free" !important;
}

[class^=icon-],
[class*=" icon-"] {
  font-family: "icomoon" !important;
}

[style*="color: rgb(50, 55, 63)"] {
  color: #e2ebfd !important;
}

* {
  color: #abb2bf;
  background-color: #21252b;
}

:root {
  --joplin-color: #e2ebfd !important;
  --joplin-background-color3: #21252b !important;
}

[style*="color: #ffffff"],
.sidebar * {
  color: #abb2bf !important;
}

[style*="background-color: rgb(244, 245, 246);"] {
  background-color: unset !important;
}

[style*="background-color: rgb(255, 255, 255);"] {
  background-color: #21252b !important;
}

[style*="background-color: #2D6BDC;"],
[style*="background-color: #61afef;"] {
  background-color: #56b6c2 !important;
}

button:not(.sidebar > div > div:first-child > div:first-child + button) {
  color: #abb2bf;
  background-color: #1d1f23;
}
button:not(.sidebar > div > div:first-child > div:first-child + button):hover, button:not(.sidebar > div > div:first-child > div:first-child + button):hover > span {
  color: #e2ebfd;
  background-color: #282c34;
  transition: ease-in-out 200ms;
}
button:not(.sidebar > div > div:first-child > div:first-child + button) * {
  background-color: inherit;
  color: inherit;
}

div.config-screen > div:last-of-type > div[style="font-family: Roboto; font-size: 12px; line-height: 1.6em; color: rgb(50, 55, 63); padding: 10px 10px 10px 24px; background-color: rgb(255, 208, 141);"] {
  background-color: #be5046 !important;
  color: #e2ebfd !important;
  font-weight: 800;
  font-style: italic;
  text-align: center;
}
div.config-screen > div:last-of-type > div[style="font-family: Roboto; font-size: 12px; line-height: 1.6em; color: rgb(50, 55, 63); padding: 10px 10px 10px 24px; background-color: rgb(255, 208, 141);"] > a {
  background-color: unset !important;
  color: #61afef !important;
  opacity: 1;
  text-decoration: none !important;
  font-family: "PT Mono", monospace !important;
}
div.config-screen input[type=text],
div.config-screen input[type=number],
div.config-screen select,
div.config-screen button {
  border: 2px solid #5c6370 !important;
  font-family: "PT Mono", monospace !important;
}
div.config-screen div.dEyqmm {
  background-color: #21252b !important;
}
div.config-screen div.dEyqmm button {
  color: #abb2bf !important;
  background-color: #1d1f23 !important;
}
div.config-screen div.dEyqmm button:hover, div.config-screen div.dEyqmm button:hover span {
  background-color: inherit !important;
}
div.config-screen div.gzoyKc {
  background-color: unset !important;
}
div.config-screen div.gzoyKc a i, div.config-screen div.gzoyKc a span {
  background-color: unset;
  color: #828997 !important;
}
div.config-screen div.gzoyKc a.hWxWTS, div.config-screen div.gzoyKc a.hWxWTS * {
  color: #e2ebfd !important;
  background-color: #1d1f23 !important;
}
div.config-screen div.gzoyKc a.hWxWTS:hover, div.config-screen div.gzoyKc a.hWxWTS:hover *, div.config-screen div.gzoyKc a:hover, div.config-screen div.gzoyKc a:hover * {
  color: #e2ebfd !important;
  background-color: #282c34 !important;
}
div.config-screen div.gzoyKc div.kiZMXV {
  border: none;
  opacity: 1;
  background-color: #1d1f23 !important;
  color: #e2ebfd !important;
  margin-top: 2em;
  padding: 1.5ch 1ch;
  font-size: 120%;
}
div.config-screen div.cVMdhB * {
  background-color: unset;
  color: #abb2bf;
}
div.config-screen div.cVMdhB * input[placeholder="Search for plugins..."], div.config-screen div.cVMdhB * input.hvfpjg {
  background-color: #21252b !important;
  color: #abb2bf !important;
}
div.config-screen div.cVMdhB * div.fjjhGD div[style*="background-color: rgb(45, 107, 220)"] {
  background-color: #98c379 !important;
}
div.config-screen table kbd {
  background-color: #1d1f23 !important;
  color: #abb2bf !important;
}

div.modal-layer,
div.master-password-dialog {
  width: 100% !important;
}

div.gwrYwU {
  background-color: #282c34 !important;
  border-radius: 8px;
  font-style: italic;
  border: 2px solid #1d1f23;
}

div.btxyZV {
  background-color: #21252b !important;
  border-radius: 8px;
  font-style: italic;
  border: 2px solid #1d1f23;
}

#react-root > div.profile-default > div > div.sc-fzqNJr.eUoFzX > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-tempContainer-7vQGh4tzM7yygIt3xJ6U4h > div.resizableLayoutItem.rli-editor > div > div:nth-child(2) {
  z-index: 1;
}

#react-root > div.profile-default > div > div.sc-fzqNJr.eUoFzX > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-tempContainer-7vQGh4tzM7yygIt3xJ6U4h > div.resizableLayoutItem.rli-editor > div > div {
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 2;
}

div.modal-dialog {
  border-radius: 8px;
  background-color: #1d1f23 !important;
}
div.modal-dialog > div:first-of-type {
  background-color: #1d1f23 !important;
}
div.modal-dialog > div:first-of-type i, div.modal-dialog > div:first-of-type a {
  background-color: transparent !important;
}
div.modal-dialog div.item-list {
  background-color: #1d1f23;
}
div.modal-dialog div.item-list > div {
  background-color: #21252b !important;
}
div.modal-dialog div.item-list > div[style="height: 0px;"] {
  background-color: transparent !important;
}
div.modal-dialog div.item-list > div:not([style="height: 0px;"]) {
  border-bottom: 1px dashed #abb2bf !important;
}
div.modal-dialog div.item-list > div:not([style="height: 0px;"]) span {
  background-color: transparent;
}
div.modal-dialog div.item-list > div:not([style="height: 0px;"]) span[style*="color: #32373F;"] {
  color: #abb2bf !important;
}
div.modal-dialog div.item-list > div:not([style="height: 0px;"]).selected {
  background-color: #282c34 !important;
  font-style: italic;
}
div.modal-dialog div.item-list > div:not([style="height: 0px;"]).selected div[style*="color: rgb(124, 139, 158);"] {
  color: #e2ebfd !important;
}
div.modal-dialog div.item-list > div:not([style="height: 0px;"]).selected > div > span {
  color: #e2ebfd;
}
div.modal-dialog div.item-list > div:not([style="height: 0px;"]).selected > div {
  background-color: inherit !important;
}
div.modal-dialog div.item-list > div:nth-last-child(2) {
  border-bottom: none !important;
  border-radius: 0 0 8px 8px;
}

div.modal-layer:not([style*="background-color: rgba(0, 0, 0, 0.6);"]) *,
div[style*="index: 9999"] *,
div.master-password-dialog * {
  color: #abb2bf;
  background-color: #21252b;
}
div.modal-layer:not([style*="background-color: rgba(0, 0, 0, 0.6);"]) a,
div[style*="index: 9999"] a,
div.master-password-dialog a {
  color: #61afef !important;
}
div.modal-layer:not([style*="background-color: rgba(0, 0, 0, 0.6);"]) button,
div[style*="index: 9999"] button,
div.master-password-dialog button {
  min-width: unset !important;
  width: fit-content !important;
  background-color: #1d1f23 !important;
}

iframe.fKGdbI {
  border-bottom: none !important;
}

div.rli-root div.rli-noteList > div > div > div {
  background-color: #21252b !important;
}
div.rli-root div.rli-noteList > div > div > div button {
  background-color: #1d1f23 !important;
  border-radius: 3px;
}
div.rli-root div.rli-noteList > div > div > div input[placeholder="Search..."] + button, div.rli-root div.rli-noteList > div > div > div input[placeholder="Search..."] + button * {
  background: transparent !important;
}
div.rli-root div.rli-sideBar .list-item-container {
  padding-right: 1.25ch;
}
div.rli-root div.rli-sideBar .list-item-container:hover, div.rli-root div.rli-sideBar .list-item-container:hover * {
  transition: ease-in-out 200ms;
}
div.rli-root div.rli-sideBar .list-item-container a.list-item {
  display: flex;
  justify-content: space-between;
}
div.rli-root div.rli-sideBar .list-item-container a.list-item div.note-count-label {
  color: #828997;
  font-size: 85%;
}
div.rli-root .rli-editor, div.rli-root .rli-editor * {
  background-color: #282c34;
  color: #abb2bf;
}
div.rli-root .rli-editor input.title-input, div.rli-root .rli-editor * input.title-input {
  border-radius: 8px;
  color: #e2ebfd;
  padding-left: 1ch !important;
}
div.rli-root .rli-editor div.note-search-bar, div.rli-root .rli-editor * div.note-search-bar {
  border-top: none !important;
}
div.rli-root .rli-editor div.note-search-bar > div, div.rli-root .rli-editor * div.note-search-bar > div {
  padding-left: 1ch;
  padding-left: 4px;
}
div.rli-root .rli-editor div.note-search-bar input, div.rli-root .rli-editor * div.note-search-bar input {
  border: none;
  padding: 3px;
  padding-left: 4px;
  border-radius: 8px;
}
div.rli-root .rli-editor .tag-list button, div.rli-root .rli-editor * .tag-list button {
  background-color: #528bff !important;
  color: #e2ebfd !important;
  opacity: 1;
}
div.rli-root .rli-editor .editor-toolbar a:not(.disabled):hover, div.rli-root .rli-editor .editor-toolbar a:not(.disabled):hover *,
div.rli-root .rli-editor .editor-toolbar button div:hover, div.rli-root .rli-editor .editor-toolbar button div:hover *, div.rli-root .rli-editor * .editor-toolbar a:not(.disabled):hover, div.rli-root .rli-editor * .editor-toolbar a:not(.disabled):hover *,
div.rli-root .rli-editor * .editor-toolbar button div:hover, div.rli-root .rli-editor * .editor-toolbar button div:hover * {
  background-color: #56b6c2 !important;
  color: #e2ebfd !important;
  opacity: 1 !important;
}
div.rli-root .rli-editor .editor-toolbar, div.rli-root .rli-editor editor-toolbar *, div.rli-root .rli-editor * .editor-toolbar, div.rli-root .rli-editor * editor-toolbar * {
  background-clip: content-box;
}
div.rli-root button:not(.sidebar > div > div:first-child > div:first-child + button) {
  background-color: #1d1f23;
  color: #abb2bf;
}
div.rli-root .sidebar > div > div:first-child > div:first-child + button span {
  background-color: #1d1f23;
  color: #abb2bf;
  padding: 4px;
  border-radius: 3px;
}
div.rli-root button:not(button[class="sc-AxhCb sc-fzoLsD jBRUMO sc-fzpans sc-fzqPZZ dNxtxI"]):hover span,
div.rli-root button:not(button[class="sc-AxhCb sc-fzoLsD jBRUMO sc-fzpans sc-fzqPZZ dNxtxI"]):not(.sidebar > div > div:first-child > div:first-child + button):not([aria-label="Toggle editors"]):hover {
  color: #e2ebfd !important;
  background-color: #c678dd !important;
  opacity: 1 !important;
  transition: ease-in-out 200ms;
}
div.rli-root button[class="sc-AxhCb sc-fzoLsD jBRUMO sc-fzpans sc-fzqPZZ dNxtxI"]:hover {
  background-color: #d19a66 !important;
  color: #e2ebfd !important;
}
div.rli-root button[class="sc-AxhCb sc-fzoLsD jBRUMO sc-fzpans sc-fzqPZZ dNxtxI"]:hover * {
  color: inherit !important;
}
div.rli-root a[title=Tags]:hover, div.rli-root a[title=Tags]:hover * {
  background-color: #61afef !important;
  color: #e2ebfd !important;
  transition: ease-in-out 200ms;
}
div.rli-root input[type=text] {
  color: #828997 !important;
}
div.rli-root div.tox-toolbar-overlord > div.tox-toolbar__primary {
  background-color: #282c34 !important;
  color: #abb2bf !important;
}
div.rli-root div[style*="background: rgb(255, 208, 141)"],
div.rli-root div[style*="background: rgb(255, 208, 141)"] * {
  background-color: #e06c75 !important;
  color: #abb2bf !important;
}
div.rli-root div[style*="cursor: row-resize"],
div.rli-root div[style*="cursor: col-resize"] {
  background: transparent !important;
}
div.rli-root div[style*="cursor: row-resize"]:hover,
div.rli-root div[style*="cursor: col-resize"]:hover {
  opacity: 0.6;
  background-color: #636d83 !important;
}
div.rli-root .list-item-container * {
  background-color: inherit;
}
div.rli-root .list-item-container:hover, div.rli-root .list-item-container:hover * {
  background-color: #282c34 !important;
}
div.rli-root .list-item-container::before {
  border-bottom: 1px solid #5c6370 !important;
}
div.rli-root .juqUHj,
div.rli-root .selected, div.rli-root .selected *,
div.rli-root input[type=text] {
  background-color: #1d1f23 !important;
}
div.rli-root div.CodeMirror-code .CodeMirror-line::selection, div.rli-root div.CodeMirror-code .CodeMirror-line span::selection {
  background-color: black !important;
  opacity: 0.6 !important;
}
div.rli-root div.CodeMirror-code .cm-tab + span {
  color: #e5c07b;
}
div.rli-root div.CodeMirror-code .cm-header {
  color: #e06c75 !important;
  line-height: 1.5em !important;
}
div.rli-root div.CodeMirror-code .cm-search-marker {
  background: #e5c07b !important;
  color: black !important;
}
div.rli-root div.CodeMirror-code .cm-search-marker-selected {
  background: #d19a66 !important;
  color: #ffffff !important;
}
div.rli-root div.CodeMirror-code .cm-search-marker-scrollbar {
  background: #e5c07b !important;
}
div.rli-root div.CodeMirror-code .cm-variable-2,
div.rli-root div.CodeMirror-code .cm-variable-3,
div.rli-root div.CodeMirror-code .cm-tab + .cm-tab + .cm-keyword,
div.rli-root div.CodeMirror-code .cm-keyword {
  color: #e5c07b !important;
}
div.rli-root div.CodeMirror-code .cm-meta {
  color: #abb2bf;
}
div.rli-root div.CodeMirror-code .cm-keyword + .cm-meta + .cm-keyword,
div.rli-root div.CodeMirror-code .cm-keyword + .cm-property + .cm-keyword {
  color: #e5c07b !important;
}
div.rli-root div.CodeMirror-code .cm-katex-marker-open,
div.rli-root div.CodeMirror-code .cm-katex-marker-close,
div.rli-root div.CodeMirror-code .cm-katex-marker-open {
  color: #98c379 !important;
}
div.rli-root div.CodeMirror-code .cm-error {
  color: inherit !important;
  background-color: inherit !important;
  border-bottom: 1px dotted #dc322f !important;
}
div.rli-root div.CodeMirror-code .CodeMirror-scrollbar-filler,
div.rli-root div.CodeMirror-code .CodeMirror-gutter-filler {
  background-color: white !important;
}
div.rli-root div.CodeMirror-code .cm-number {
  color: #56b6c2 !important;
}
div.rli-root div.CodeMirror-code .cm-quote {
  color: #98c379 !important;
}
div.rli-root div.CodeMirror-code .cm-negative {
  color: #d44 !important;
}
div.rli-root div.CodeMirror-code .cm-positive {
  color: #292 !important;
}
div.rli-root div.CodeMirror-code .cm-header,
div.rli-root div.CodeMirror-code .cm-strong {
  font-weight: bold !important;
}
div.rli-root div.CodeMirror-code .cm-em {
  font-style: italic !important;
}
div.rli-root div.CodeMirror-code .cm-link {
  text-decoration: underline !important;
}
div.rli-root div.CodeMirror-code .cm-strikethrough {
  text-decoration: line-through !important;
}
div.rli-root div.CodeMirror-code .cm-image {
  color: #98c379 !important;
}
div.rli-root div.CodeMirror-code .cm-def {
  color: #61afef !important;
}
div.rli-root div.CodeMirror-code .cm-operator {
  color: #56b6c2 !important;
}
div.rli-root div.CodeMirror-code .cm-variable {
  color: #61afef !important;
}
div.rli-root div.CodeMirror-code .cm-property {
  color: #61afef !important;
}
div.rli-root div.CodeMirror-code .cm-comment {
  color: #828997 !important;
  border: none !important;
}
div.rli-root div.CodeMirror-code .cm-jn-inline-code {
  background-color: #21252b !important;
  color: #828997 !important;
  padding: 2px;
}
div.rli-root div.CodeMirror-code .cm-jn-code-block-background,
div.rli-root div.CodeMirror-code .cm-jn-code-block {
  background-color: #1d1f23;
}
div.rli-root div.CodeMirror-code .cm-jn-code-block-background *,
div.rli-root div.CodeMirror-code .cm-jn-code-block * {
  background-color: inherit;
}
div.rli-root div.CodeMirror-code > * ~ pre + div > * {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
div.rli-root div.CodeMirror-code > * ~ pre + div ~ :is(div + pre) > * {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
div.rli-root div.CodeMirror-code .cm-tag {
  color: #e06c75 !important;
}
div.rli-root div.CodeMirror-code .cm-bracket {
  color: #e06c75 !important;
}
div.rli-root div.CodeMirror-code div.CodeMirror span.CodeMirror-matchingbracket {
  color: #0b0 !important;
}
div.rli-root div.CodeMirror-code div.CodeMirror span.CodeMirror-nonmatchingbracket {
  color: #a22 !important;
}
div.rli-root div.CodeMirror-code .CodeMirror-matchingtag {
  background: rgba(255, 150, 0, 0.3) !important;
}
div.rli-root div.CodeMirror-code .CodeMirror-activeline-background {
  background: #e8f2ff !important;
}
div.rli-root div.CodeMirror-code .cm-searching {
  background-color: #ffa !important;
  background-color: rgba(255, 255, 0, 0.4) !important;
}
div.rli-root div.CodeMirror-code .cm-strong {
  color: #d19a66 !important;
}
div.rli-root div.CodeMirror-code .cm-em {
  color: #c678dd !important;
}
div.rli-root div.CodeMirror-code .cm-link-text {
  color: #61afef !important;
}
div.rli-root div.CodeMirror-code .cm-string {
  color: #98c379 !important;
}
div.rli-root div.CodeMirror-code .cm-url {
  color: #c678dd !important;
  opacity: 1;
}