userchrome.css

/* userchrome.css */

/* General Settings */
:root {
  --background-color: #1a1b26 !important;
  --joplin-background-color3: #1a1b26 !important;
  --joplin-background-color: #1a1b26 !important;
  --joplin-code-background-color: #1a1b26 !important;
  --joplin-color: #a6a6ff !important;
  --foreground-color: #c0caf5 !important;
  --accent-color: #7aa2f7 !important;
  --border-color: #1a1b26 !important;
  --hover-color: #1e2037 !important;
  --active-color: #33467c !important;
  --header-background-color: #24283b !important;
  --header-foreground-color: #c0caf5;
  --highlight-color: #bb9af7 !important;
  --selection-color: #3b4261 !important;
  --red: #f7768e !important;
  --orange: #ff9e64 !important;
  --yellow: #e0af68 !important;
  --green: #9ece6a !important;
  --light-green: #73daca !important;
  --cyan: #7dcfff !important;
  --blue: #7aa2f7 !important;
  --purple: #bb9af7 !important;
  --pink: #c792ea !important;
  --light-blue: #b4f9f8 !important;
  --white: #c0caf5 !important;
  --selected-notebook-color: #a1ffb7 !important;
  --joplin-selected-color: #6e6eff3d !important;
  --highlighted-color: #6e6eff18 !important;
  --button-color: #ffffff !important;
  --joplin-divider-color: #8b3a3a00 !important;
  --transparent: #ffffff00 !important;
  --lavender: #a6a6ff !important;
  --joplin-url-color: var(--cyan) !important;
  --joplin-background-color-hover3: var(--hover-color) !important;
}

/* Application Background */
body {
  background-color: var(--background-color) !important;
  color: var(--foreground-color) !important;
}

/* Header */
header {
  background-color: var(--background-color) !important;
  color: var(--header-foreground-color) !important;
}

header .header-bar {
  border-bottom: 1px solid var(--border-color) !important;
}

header .header-bar .header-bar-item {
  color: var(--header-foreground-color) !important;
}

header .header-bar .header-bar-item:hover {
  background-color: var(--hover-color) !important;
}

/* Sidebar */
div.sidebar {
  background-color: var(--background-color) !important;
  color: var(--foreground-color) !important;
}

div.sidebar .list-item {
  border-bottom: 1px solid var(--border-color) !important;
}

div.sidebar .list-item:hover {
  background-color: var(--hover-color) !important;
}

div.sidebar .list-item.active {
  background-color: var(--selection-color) !important;
  color: var(--header-foreground-color) !important;
}

div.sidebar .list-item .list-item-title {
  color: var(--accent-color) !important;
}

/* Note List */
div.note-list {
  background-color: var(--background-color) !important;
  color: var(--lavender) !important;
}

div.note-list .note-list-item {
  border-bottom: 1px solid var(--border-color) !important;
}

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

div.note-list .note-list-item.active {
  background-color: var(--selection-color) !important;
  color: var(--header-foreground-color) !important;
}

div.note-list .scrollable-container {
  overflow-y: auto !important;
  overflow-x: hidden !important; /* Fix double scrollbars */
}

/* Note List Overflow */
.note-list>.notes {
  overflow-x: initial !important;
}

/* Note Editor */
div.editor {
  background-color: var(--background-color) !important;
  color: var(--foreground-color) !important;
}

/* CodeMirror Styles (Markdown Editor) */
.CodeMirror {
  background-color: var(--background-color) !important;
  color: var(--foreground-color) !important;
}

.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
  background: var(--selection-color) !important;
}

.CodeMirror-gutter,
.CodeMirror-gutters {
  background-color: var(--background-color) !important;
  border-right: 1px solid var(--border-color) !important;
}

.CodeMirror-cursor {
  border-left: 1px solid var(--accent-color) !important;
}

.CodeMirror-selected {
  background-color: var(--selection-color) !important;
}

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

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

/* CodeMirror Syntax Highlighting */
div.CodeMirror span.cm-header-1 {
  color: var(--blue) !important;
  font-size: 2em !important;
  /* border-bottom: 1px solid var(--foreground-color) !important; */
}

div.CodeMirror span.cm-header-2 {
  color: var(--cyan) !important;
  font-size: 1.75em !important;
  /* border-bottom: 1px dotted var(--foreground-color) !important; */
}

div.CodeMirror span.cm-header-3 {
  color: var(--purple) !important;
  font-size: 1.5em !important;
}

div.CodeMirror span.cm-header-4 {
  color: var(--yellow) !important;
  font-size: 1.25em !important;
}

div.CodeMirror span.cm-header-5 {
  color: var(--orange) !important;
  font-size: 1em !important;
}

div.CodeMirror span.cm-header-6 {
  color: var(--red) !important;
  font-size: 0.875em !important;
}

.cm-quote {
  color: var(--purple) !important;
  font-style: italic !important;
}

.cm-strong {
  color: var(--white) !important;
}

.cm-em {
  color: var(--purple) !important;
  font-style: italic !important;
}

.cm-link {
  color: var(--cyan) !important;
  text-decoration: underline !important;
}

.cm-strikethrough {
  color: var(--red) !important;
  text-decoration: line-through !important;
}

/* Lists - Not working? */
.cm-variable-2 {
  color: var(--white) !important; /* Un-tabbed list */
  /* This used to be white, but I have changed it to lavender, nvm changed it back to white */
}

 .cm-variable-3 {
  color: var(--blue) !important;
}

.cm-variable-4 {
  color: var(--cyan) !important;
}

.cm-variable-5 {
  color: var(--purple) !important;
}

.cm-variable-6 {
  color: var(--pink) !important;
}

.cm-variable-7 {
  color: var(--green) !important;
} 

/* To get the pink bit for third tabbing */
.cm-keyword {
  color: var(--pink) !important;
}



/* Numbered Lists */
.cm-number {
  color: var(--white) !important; /* Un-tabbed numbered list */
}

.cm-number.cm-tabbed-list-1 {
  color: var(--green) !important;
}

.cm-number.cm-tabbed-list-2 {
  color: var(--cyan) !important;
}

.cm-number.cm-tabbed-list-3 {
  color: var(--pink) !important;
}

.cm-number.cm-tabbed-list-4 {
  color: var(--purple) !important;
}

.cm-number.cm-tabbed-list-5 {
  color: var(--yellow) !important;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 5px !important;
}

/* Change this to --background-color for a cleaner/flatter look */
::-webkit-scrollbar-track {
  background-color: var(--background-color) !important;
}

::-webkit-scrollbar-thumb {
  background-color: #1f222f;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--hover-color) !important;
}

/* Buttons */
.eJDboZ,
button {
  background-color: #1a1b26 !important;
  color: var(--foreground-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 15px !important;
  /* padding: 8px 12px !important; */
  /* font-size: 15px !important; */
}

button:hover {
  background-color: var(--hover-color) !important;
}

button:active {
  background-color: var(--active-color) !important;
}

.note-list>.emptylist,
.dtFiFQ,
.sc-aXZVg,
.rGEbE,
.sc-fqkvVR,
.dEZmvG,
.gRlcnJ,
.iTdchv,
.editor-toolbar .button, .header .button,
.jeUOIH,
.fkcYHc,
.fRueuA {
  background-color: var(--transparent) !important;
  color: var(--lavender) !important;
}

/* Search box */
.fhtXVs {
  border: 0px !important;
}

/* Search box icon */
.jWrOPG {
  color: var(--lavender) !important;
}

/* Modals */
div.modal {
  background-color: var(--background-color) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--foreground-color) !important;
}

div.modal-header {
  background-color: var(--background-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--header-foreground-color) !important;
}

div.modal-footer {
  border-top: 1px solid var(--border-color) !important;
}

/* Note and Todo Creator */
div#note-editor-container,
div#todo-editor-container {
  background-color: var(--background-color) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--foreground-color) !important;
}

/* Note Headings - React root is new */
.note-title,
#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor > div > div > div > div.note-title-wrapper > input {
  background-color: var(--background-color) !important;
  color: var(--header-foreground-color) !important;
}

/* New note/todo button area background */
.jZViVd {
  background-color: var(--background-color) !important;
}


/* Tool Buttons */
div.editor-toolbar button {
  background-color: var(--background-color);
  color: var(--foreground-color);
  border: none !important;
}

div.editor-toolbar button:hover {
  background-color: var(--hover-color);
}

div.editor-toolbar button:active {
  background-color: var(--active-color);
}

/* Additional UI Elements */
div.tag-bar,
div.editor-toolbar,
.uFVwC,
.dPazIY,
.bkWilx,
.input.title-input {
  background-color: var(--background-color) !important;
  color: var(--lavender) !important;
}

/* Default CM paragraph */
div.CodeMirror-sizer {
  background-color: var(--background-color) !important;
  color: var(--white) !important;
}

#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor > div > div > div > div:nth-child(2) {
  background-color: var(--background-color) !important;
}

#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-noteList > div:nth-child(2) > div {
  background-color: var(--background-color) !important;
}

#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-sideBar > div:nth-child(2) > div {
  background-color: var(--background-color) !important;
}

/* Notebook Selection Highlight - deprecated for color coded depth */
.cqlwYH,
.eibLdd,
.izrMvb,
.edjcDi,
.gXcbDC {
  background-color: transparent !important;
}

#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor {
  background-color: var(--background-color) !important;
}

.iCezTc,
#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor > div > div > div > div.sc-gFqAkR.uFVwC > input {
  background-color: var(--background-color) !important;
}

/* Selected notebooks */
.hssDCu,
.jjanjz,
.efuyhl {
  background: var(--joplin-selected-color) !important;
} 

/* Notebook sidebar selector hover */
.hssDCu:hover,
.jjanjz:hover,
.efuyhl:hover {
  background-color: var(--highlighted-color) !important;
}

/* We also need this one for the 'Border' */
.kTmxmP:hover,
.jeERxN:hover,
.fSmLkY:hover {
  border-color: var(--highlighted-color) !important;
}

/* "Notebooks" and "Tags" Title label */
.eAKTqK {
  color: var(--lavender) !important;
}

/* Icons for above */
.fYmytX {
  color: var(--lavender) !important;
}

/* Notebook Titles */
.eFlvJZ {
  color: var(--lavender) !important;
}

/* Selected Notebook Text */
.kFvzzK {
  color: var(--lavender) !important;
}

/* Note Titles in sidebar */
.note-list-item
> .content
> .title {
  color: var(--lavender) !important;
}

/* Note title input */
.title-input,
.note-title, #react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor > div > div > div > div.note-title-wrapper > input {
  color: var(--lavender) !important;
}



/* Rich editor top bar colour */
.joplin-tinymce .tox .tox-toolbar__primary {
  background-color: var(--background-color) !important;
}

/* Rich text icons */
.tox .tox-tbtn, .tox .tox-tbtn svg, .tox .tox-menu button > svg, .tox .tox-split-button, .tox .tox-dialog__header, .tox .tox-button--icon .tox-icon svg, .tox .tox-button.tox-button--icon .tox-icon svg, .tox textarea, .tox input, .tox .tox-label, .tox .tox-toolbar-label {
  color: var(--lavender) !important;
  fill: var(--lavender) !important;
}

/* Rich text editor bar under background color */
/* Center bit with main interaction buttons */
.tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary, .tox-editor-header .tox-toolbar__primary, .tox .tox-toolbar-overlord, .tox.tox-tinymce-aux .tox-toolbar__overflow, .tox .tox-statusbar, .tox .tox-dialog__header, .tox .tox-dialog, .tox textarea, .tox input, .tox .tox-menu, .tox .tox-dialog__footer,

/* Right bit where editor toggle is */
#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor > div > div > div > div:nth-child(2) > div > div:nth-child(2),

/* Left bit with back/forward buttons */
#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor > div > div > div > div:nth-child(2) > div > div:nth-child(1)
{
  background-color: var(--background-color) !important;  
}

/* Rich text editor buttons */
.plugin-icon.fa, .plugin-icon.far, .plugin-icon.fasvg, .plugin-icon.fasvg, .tox .tox-tbtn, .tox .tox-tbtn svg, .tox .tox-menu button > svg, .tox .tox-split-button, .tox .tox-dialog__header, .tox .tox-button--icon .tox-icon svg, .tox .tox-button.tox-button--icon .tox-icon svg, .tox textarea, .tox input, .tox .tox-label, .tox .tox-toolbar-label {
  color: var(--lavender) !important;
  fill: var(--lavender) !important;
}

.tox .tox-tbtn {
  color: var(--lavender) !important;
  fill: var(--lavender) !important;
}

/* Rich text editor toggle */
#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor > div > div > div > div:nth-child(2) > div > div:nth-child(2) > button > div:nth-child(2),
#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor > div > div > div > div:nth-child(2) > div > div:nth-child(1) > div > div:nth-child(3) > button > div:nth-child(1) {
  background-color: var(--lavender) !important;
  border-color: var(--lavender) !important;
}

/* Sidebar Expand Link */
.sidebar-expand-link {
  color: var(--white) !important;
}

/* Toolbar Icons */
.toolbar-icon {
  color: var(--lavender) !important;
}

/* Middle separator */
#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor > div.sc-cwHptR.DnUmE > div > div > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(2) {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  border-left: 1px solid #242635 !important;
}

/* Code block background */
.CodeMirror pre.CodeMirror-line-like {
  padding-left: 0;
  background: var(--background-color) !important;
}

/* Detailed note view */
.note-list-item
> .row.-shared {
    color: var(--joplin-color-warn3) !important;
}

/* Detailed note view titles */
#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-noteList > div.sc-cwHptR.DnUmE > div > div.note-list-header {
  height: 26px;
  background-color: var(--background-color) !important;
}

.note-list-header>.item {
  color: var(--lavender) !important;
}

/* No note selected bg */
#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor > div.sc-cwHptR.DnUmE > div {
  background-color: transparent !important;
}

#root {
  background-color: var(--background-color) !important;
  color: var(--lavender) !important;
}