diff --git a/justfile b/justfile
new file mode 100644
index 0000000..41c5489
--- /dev/null
+++ b/justfile
@@ -0,0 +1,6 @@
+_default:
+  @just --list
+
+build:
+  whiskers templates/userchrome.tera
+  whiskers templates/userstyle.tera
diff --git a/src/frappe/userchrome.css b/src/frappe/userchrome.css
index 4f0e74d..5448b72 100644
--- a/src/frappe/userchrome.css
+++ b/src/frappe/userchrome.css
@@ -2,79 +2,53 @@
 /* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */
 
 :root {
-	--ctp-frappe-rosewater: #f2d5cf;
-	--ctp-frappe-flamingo: #eebebe;
-	--ctp-frappe-pink: #f4b8e4;
-	--ctp-frappe-mauve: #ca9ee6;
-	--ctp-frappe-red: #e78284;
-	--ctp-frappe-maroon: #ea999c;
-	--ctp-frappe-peach: #ef9f76;
-	--ctp-frappe-yellow: #e5c890;
-	--ctp-frappe-green: #a6d189;
-	--ctp-frappe-teal: #81c8be;
-	--ctp-frappe-sky: #99d1db;
-	--ctp-frappe-sapphire: #85c1dc;
-	--ctp-frappe-blue: #8caaee;
-	--ctp-frappe-lavender: #babbf1;
-	--ctp-frappe-text: #c6ceef;
-	--ctp-frappe-subtext1: #b5bddc;
-	--ctp-frappe-subtext0: #a5acc9;
-	--ctp-frappe-overlay2: #949bb7;
-	--ctp-frappe-overlay1: #838aa4;
-	--ctp-frappe-overlay0: #737891;
-	--ctp-frappe-surface2: #62677e;
-	--ctp-frappe-surface1: #51566c;
-	--ctp-frappe-surface0: #414559;
-	--ctp-frappe-base: #303446;
-	--ctp-frappe-mantle: #292c3c;
-	--ctp-frappe-crust: #232634;
-	--font-face: "Noto Sans", Arial, Helvetica, sans-serif;
-	--font-mono: "Roboto Mono", Courier, monospace;
-	--font-size: 13px;
-	--icon-size: 16px;
-
-	--regular: 400;
-	--bolder: 600;
-
-	--scroll-radius: 3px;
-
-	--opacity-0-8: 0.8;
+  --font-face: "Noto Sans", Arial, Helvetica, sans-serif;
+  --font-mono: "Roboto Mono", Courier, monospace;
+  --font-size: 13px;
+  --icon-size: 16px;
+
+  --regular: 400;
+  --bolder: 600;
+
+  --scroll-radius: 3px;
+
+  --opacity-0-8: 0.8;
 }
 
 /* Font used by Joplin */
 * {
-	font-family: var(--font-face) !important;
+  font-family: var(--font-face) !important;
 }
 
 html, body {
-	background-color: var(--ctp-frappe-base) !important;
-	font-size: var(--font-size) !important;
-	font-weight: var(--regular) !important;
-	color: var(--light) !important;
+  background-color: #303446 !important;
+  font-size: var(--font-size) !important;
+  font-weight: var(--regular) !important;
+  color: var(--light) !important;
 }
 .CodeMirror-selected {
-		/* background-color: var(--lighter-grey) !important; */
-		background: #6B6B6B !important;
+    /* background-color: var(--lighter-grey) !important; */
+    background: #6B6B6B !important;
 }
 .rli-root {
-	background-color: var(--ctp-frappe-base) !important;
+  background-color: #303446 !important;
 }
 
 /* Icons */
 .fa, .far, .fas {
-	font-weight: 900 !important;
-	font-family: "Font Awesome 5 Free" !important;
-	font-size: var(--icon-size) !important;
+  font-weight: 900 !important;
+  font-family: "Font Awesome 5 Free" !important;
+  font-size: var(--icon-size) !important;
 }
 
 ::placeholder {
-	color: var(--ctp-frappe-lavender) !important;
+  color: #BABBF1 !important;
 }
 
 /* Scrollbars */
 ::-webkit-scrollbar-thumb {
-	background-color: var(--ctp-frappe-surface0) !important;
-	border-radius: var(--scroll-radius) !important;
+  background-color: #414559 !important;
+  border-radius: var(--scroll-radius) !important;
 }
 
 /*********************************************************************************
@@ -83,7 +57,7 @@ html, body {
 
 /* General panel style */
 .resizableLayoutItem > div {
-	background-color: var(--ctp-frappe-base) !important;
+  background-color: #303446 !important;
 }
 
 /*********************************************************************************
@@ -91,101 +65,101 @@ html, body {
 *********************************************************************************/
 
 .sidebar {
-	background-color: var(--ctp-frappe-crust) !important;
-	text-transform: uppercase;
-	font-weight: var(--bolder);
+  background-color: #232634 !important;
+  text-transform: uppercase;
+  font-weight: var(--bolder);
 }
 
 /* Hide "All notes" icon
  * Comment this next block if you want the "All notes" icon */
 i.icon-notes {
-	display: none !important;
+  display: none !important;
 }
 
 /* FOLDERS */
 
 /* "Add new notebook" button */
 .sidebar > div > div > button span {
-	color: var(--ctp-frappe-lavender) !important;
+  color: #BABBF1 !important;
 }
 
 .sidebar > div > div > button:hover {
-	opacity: var(--opacity-0-8);
+  opacity: var(--opacity-0-8);
 }
 .folders .list-item-container {
-		background-color: var(--ctp-frappe-crust) !important;
+    background-color: #232634 !important;
 }
 .folders .list-item-container:hover {
-	background-color: var(--ctp-frappe-overlay0) !important;
+  background-color: #737994 !important;
 }
 
 .folders .list-item-container a {
-	text-transform: initial;
-	color: var(--ctp-frappe-text) !important;
-	font-weight: var(--regular);
+  text-transform: initial;
+  color: #C6D0F5 !important;
+  font-weight: var(--regular);
 }
 
 .folders .list-item-container a:focus {
-	color: var(--ctp-frappe-text) !important;
-	background-color: var(--ctp-frappe-base) !important;
+  color: #C6D0F5 !important;
+  background-color: #303446 !important;
 }
 
 .folders .list-item-container a:hover {
-	color: var(--ctp-frappe-text) !important;
+  color: #C6D0F5 !important;
 }
 
 /* TAGS */
 .tags .list-item-container {
-		display: inline-block;
-		line-height: 0 !important;
-		padding: 0 !important;
-		height: auto !important;
-		background-color: var(--ctp-frappe-crust) !important;
+    display: inline-block;
+    line-height: 0 !important;
+    padding: 0 !important;
+    height: auto !important;
+    background-color: #232634 !important;
 }
 .tags .list-item-container:hover {
-	display: inline-block;
-	line-height: 0 !important;
-	padding: 0 !important;
-	height: auto !important;
-	background-color: var(--ctp-frappe-overlay0) !important;
+  display: inline-block;
+  line-height: 0 !important;
+  padding: 0 !important;
+  height: auto !important;
+  background-color: #737994 !important;
 }
 
 .tags .list-item-container a {
-	padding-left: 12px !important;
-	text-transform: initial;
-	color: var(--ctp-frappe-text) !important;
-	font-weight: var(--regular);
+  padding-left: 12px !important;
+  text-transform: initial;
+  color: #C6D0F5 !important;
+  font-weight: var(--regular);
 }
 
 .tags .list-item-container a:focus {
-	color: var(--ctp-frappe-text) !important;
-	background-color: var(--ctp-frappe-base) !important;
+  color: #C6D0F5 !important;
+  background-color: #303446 !important;
 }
 
 .tags .list-item-container a:hover {
-	color: var(--ctp-frappe-text) !important;
-	background-color: var(--ctp-frappe-overlay0) !important;
+  color: #C6D0F5 !important;
+  background-color: #737994 !important;
 }
 
 /* SYNCHRONIZATION */
 
 .sidebar > div:last-of-type {
-	background-color: none !important;
+  background-color: none !important;
 }
 
 .sidebar > div:last-of-type > button {
-	background-color: var(--ctp-frappe-lavender) !important;
-	border: 0px !important;
-	text-transform: uppercase;
-	font-size: var(--font-size) !important;
+  background-color: #BABBF1 !important;
+  border: 0px !important;
+  text-transform: uppercase;
+  font-size: var(--font-size) !important;
 }
 
 .sidebar > div:last-of-type > button:hover {
-	opacity: var(--opacity-0-8);
+  opacity: var(--opacity-0-8);
 }
 
 .sidebar > div:last-of-type > button > span {
-	color: var(--ctp-frappe-crust) !important;
+  color: #232634 !important;
 }
 
 /*********************************************************************************
@@ -193,111 +167,111 @@ i.icon-notes {
 *********************************************************************************/
 
 .note-list {
-	background-color: var(--ctp-frappe-mantle) !important;
-	border: none !important;
+  background-color: #292C3C !important;
+  border: none !important;
 }
 
 /* Empty notelist */
 .cLdGCO, .cLdGCO > div {
-	background-color: var(--ctp-frappe-mantle) !important;
+  background-color: #292C3C !important;
 }
 
 /* Remove border - introduced in 1.3.7 */
 .rli-noteList div {
-	border: none !important;
+  border: none !important;
 }
 
 /* BUTTONS SEARCH, SORT NOTES, NEW NOTE AND NEW TASK */
 
 div[height="50"] {
-	background-color: var(--ctp-frappe-mantle) !important;
+  background-color: #292C3C !important;
 }
 
 div[height="50"] input {
-	border: none !important;
-	color: var(--ctp-frappe-text) !important;
-	background-color: var(--ctp-frappe-mantle) !important;
+  border: none !important;
+  color: #C6D0F5 !important;
+  background-color: #292C3C !important;
 }
 
 div[height="50"] button {
-	background: transparent !important;
-	color: var(--ctp-frappe-text) !important;
-	border: 0 !important;
+  background: transparent !important;
+  color: #C6D0F5 !important;
+  border: 0 !important;
 }
 
 div[height="50"] button:hover {
-	opacity: var(--opacity-0-8);
+  opacity: var(--opacity-0-8);
 }
 
 div[height="50"] button span {
-	color: var(--ctp-frappe-text) !important;
+  color: #C6D0F5 !important;
 }
 
 .sc-hCPjZK.fJjcQe{
-	background-color: var(--ctp-frappe-mantle) !important;
+  background-color: #292C3C !important;
 }
 .new-note-todo-buttons > button {
-	background-color: var(--ctp-frappe-lavender) !important;
-	border: none !important;
+  background-color: #BABBF1 !important;
+  border: none !important;
 }
 .new-todo-button > span {
-	color: var(--ctp-frappe-crust) !important;
+  color: #232634 !important;
 }
 
 .search-bar {
-	background-color: var(--ctp-frappe-crust) !important;
+  background-color: #232634 !important;
 }
 
 .icon-search {
-	color: var(--ctp-frappe-lavender) !important;
+  color: #BABBF1 !important;
 }
 
 .sort-order-reverse-button {
-	background-color: var(--ctp-frappe-crust) !important;
+  background-color: #232634 !important;
 }
 .sort-order-reverse-button {
-	background-color: var(--ctp-frappe-crust) !important;
+  background-color: #232634 !important;
 }
 
 .fa-calendar-alt {
-	color: var(--ctp-frappe-lavender) !important;
+  color: #BABBF1 !important;
 }
 .fa-long-arrow-alt-up {
-	color: var(--ctp-frappe-lavender) !important;
+  color: #BABBF1 !important;
 }
 /* LIST OF NOTES */
 
 .note-list .list-item-container {
-	background-color: var(--ctp-frappe-mantle) !important;
+  background-color: #292C3C !important;
 }
 
 .note-list .list-item-container:hover {
-	background-color: var(--ctp-frappe-overlay1) !important;
+  background-color: #838BA7 !important;
 }
 
 .item-list.note-list .list-item-container::before {
-	border: none !important;
+  border: none !important;
 }
 
 .note-list .list-item-container a {
-	text-transform: initial;
-	color: var(--ctp-frappe-text) !important;
-	font-weight: var(--regular);
+  text-transform: initial;
+  color: #C6D0F5 !important;
+  font-weight: var(--regular);
 }
 
 .note-list .list-item-container a:focus {
-	color: var(--ctp-frappe-text) !important;
-	background-color: var(--ctp-frappe-base) !important;
+  color: #C6D0F5 !important;
+  background-color: #303446 !important;
 }
 
 .note-list .list-item-container a:hover {
-	color: var(--ctp-frappe-text) !important;
+  color: #C6D0F5 !important;
 }
 
 /* Add "..." to notes with long titles */
 .item-list.note-list .list-item-container > a > span {
-	overflow: hidden;
-	text-overflow: ellipsis;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /*********************************************************************************
@@ -309,21 +283,21 @@ div[height="50"] button span {
 /* Title */
 /* Changes frequently with updates, need to keep tabs */
 .rli-editor .cCOtNv > input {
-	padding-top: 5px;
-	background-color: var(--ctp-frappe-base) !important;
+  padding-top: 5px;
+  background-color: #303446 !important;
 }
 
 .title-input {
-  background-color: var(--ctp-frappe-base) !important;
-  color: var(--ctp-frappe-text) !important;
+  background-color: #303446 !important;
+  color: #C6D0F5 !important;
 }
 
 .editor-toolbar {
-	background-color: transparent !important;
+  background-color: transparent !important;
 }
 
 .editor-toolbar > div > a:hover {
-	opacity: var(--opacity-0-8);
+  opacity: var(--opacity-0-8);
 }
 
 /* Hide "Spell checker" button */
@@ -338,64 +312,64 @@ div[height="50"] button span {
 
 /* Hide the Toggle editors button */
 .editor-toolbar button[title="Toggle editors"] {
-	display: none !important;
+  display: none !important;
 }
 
 /* Breadcrumbs (In:...) - Used in tag listings */
 .cJOYJm {
-	background-color: var(--ctp-frappe-lavender) !important;
-	margin: 0px !important;
-	padding: 5px !important;
-	font-size: var(--font-size) !important;
+  background-color: #BABBF1 !important;
+  margin: 0px !important;
+  padding: 5px !important;
+  font-size: var(--font-size) !important;
 }
 
 .cJOYJm:hover {
-	opacity: var(--opacity-0-8);
+  opacity: var(--opacity-0-8);
 }
 
 /* CONTENT */
 /* Empty notebook */
 .rli-editor > div > div:empty {
-	background-color: var(--ctp-frappe-base) !important;
+  background-color: #303446 !important;
 }
 
 /* Editor layout splitter */
 .rli-editor > div > div > div > div > div > div > div:last-of-type {
-	border-color: var(--ctp-frappe-base) !important;
+  border-color: #303446 !important;
 }
 
 div.sc-AxirZ.hagDvo, div.sc-AxirZ.hagDvo > div {
-	background-color: var(--ctp-frappe-mantle) !important;
-	color: var(--ctp-frappe-text) !important;
+  background-color: #292C3C !important;
+  color: #C6D0F5 !important;
 }
 
 /* NOTE SEARCH BAR */
 .note-search-bar, .note-search-bar > div > div {
-	background-color: var(--ctp-frappe-base) !important;
-	width: 100%;
-	border: 0 !important;
+  background-color: #303446 !important;
+  width: 100%;
+  border: 0 !important;
 }
 
 .note-search-bar input {
-	border: 0 !important;
-	padding: 5px;
-	color: var(--ctp-frappe-text) !important;
-	background-color: var(--ctp-frappe-base) !important;
+  border: 0 !important;
+  padding: 5px;
+  color: #C6D0F5 !important;
+  background-color: #303446 !important;
 }
 
 /* TAGS */
 .tag-bar {
-	background-color: transparent !important;
+  background-color: transparent !important;
 }
 
 .tag-list > span {
-	color: var(--ctp-frappe-lavender) !important;
-	background-color: var(--ctp-frappe-crust) !important;
+  color: #BABBF1 !important;
+  background-color: #232634 !important;
 }
 
 /* Hide "Click to add tags..."*/
 a[Title="Tags"] + div > span {
-	display: none !important;
+  display: none !important;
 }
 
 /*********************************************************************************
@@ -403,128 +377,128 @@ a[Title="Tags"] + div > span {
 *********************************************************************************/
 
 .cm-s-material-darker.CodeMirror {
-	background-color: var(--ctp-frappe-base) !important;
-	color: var(--ctp-frappe-text) !important;
+  background-color: #303446 !important;
+  color: #C6D0F5 !important;
 }
 
 /* Header */
 .cm-header {
-	color: var(--ctp-frappe-lavender) !important;
+  color: #BABBF1 !important;
 }
 
 /* Italics/Emphasis, Bold, BoldItalics */
 .cm-em, .cm-strong, .cm-strong.cm-em {
-	color: var(--ctp-frappe-text) !important;
+  color: #C6D0F5 !important;
 }
 
 /* Lists (Bullet/number/todo) */
 .cm-variable-2, .cm-variable-3, .cm-keyword {
-	color: var(--ctp-frappe-text) !important;
+  color: #C6D0F5 !important;
 }
 
 .cm-s-material-darker .cm-variable-2.cm-rm-list-token {
-	color: var(--ctp-frappe-text) !important;
+  color: #C6D0F5 !important;
 }
 
 /* Links (link) */
 .cm-url {
-	color: var(--ctp-frappe-rosewater) !important;
-	opacity: 1;
-	text-decoration: underline;
+  color: #F2D5CF !important;
+  opacity: 1;
+  text-decoration: underline;
 }
 
 /* Links (text) */
 .cm-link-text {
-	color: var(--ctp-frappe-rosewater) !important;
+  color: #F2D5CF !important;
 }
 pre.CodeMirror-line {
-		color: var(--ctp-frappe-text) !important;
-		background-color: none !important;
+    color: #C6D0F5 !important;
+    background-color: none !important;
 }
 /* Image link in editor */
 span.cm-string.cm-url.cm-overlay.cm-rm-link.cm-overlay.cm-rm-image {
-	color: var(--ctp-frappe-lavender) !important;
+  color: #BABBF1 !important;
 }
 /* Comment outside code block */
 pre.CodeMirror-line span.cm-comment {
-	color: var(--ctp-frappe-overlay1) !important;
-	background-color: none !important;
-	border: 0 !important;
+  color: #838BA7 !important;
+  background-color: none !important;
+  border: 0 !important;
 }
 
 /* Codeblock selection colour */
 /* For some reason, the CodeMirror selection does not pick the colour correctly, left for now. */
 pre.CodeMirror-line span.CodeMirror-selectedtext {
-	/* background: var(--ctp-frappe-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #626880 !important; */
+  background: #6B6B6B !important;
 }
 
 div[class^="cm-jn-code-block-background "]::selection {
-	background-color: var(--ctp-frappe-base) !important;
-	border-color: var(--ctp-frappe-base) !important;
+  background-color: #303446 !important;
+  border-color: #303446 !important;
 }
 
 pre.cm-jn-code-block.CodeMirror-line span.cm-comment.cm-jn-monospace.CodeMirror-selectedtext {
-	/* background: var(--ctp-frappe-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #626880 !important; */
+  background: #6B6B6B !important;
 }
 pre.cm-jn-code-block.CodeMirror-line::selection {
-	/* background: var(--ctp-frappe-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #626880 !important; */
+  background: #6B6B6B !important;
 }
 div.cm-jn-code-block-background.CodeMirror-linebackground::selection {
-	/* background: var(--ctp-frappe-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #626880 !important; */
+  background: #6B6B6B !important;
 }
 pre.cm-jn-code-block.CodeMirror-line::selection span {
-	/* background: var(--ctp-frappe-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #626880 !important; */
+  background: #6B6B6B !important;
 }
 
 div.CodeMirror span.cm-comment.cm-jn-inline-code {
-	background-color: transparent !important;
-	padding-right: 0 !important;
-	padding-left: 0 !important;
+  background-color: transparent !important;
+  padding-right: 0 !important;
+  padding-left: 0 !important;
 }
 
 /* Code Block Text */
 div.CodeMirror span.cm-comment:not(.cm-jn-inline-code) {
-	color: var(--ctp-frappe-text) !important;
-	background-color: transparent !important;
+  color: #C6D0F5 !important;
+  background-color: transparent !important;
 }
 
 /* Code block background */
 div.CodeMirror div.cm-jn-code-block-background {
-		background-color: var(--ctp-frappe-mantle) !important;
+    background-color: #292C3C !important;
 }
 
 /* Horizontal Line */
 .cm-hr {
-	color: var(--ctp-frappe-overlay0) !important;
+  color: #737994 !important;
 }
 
 /* Cursor colour */
 .CodeMirror-cursor {
-		border-left: 1px solid var(--ctp-frappe-rosewater) !important;
-		border-right: none !important;
-		width: 0 !important;
+    border-left: 1px solid #F2D5CF !important;
+    border-right: none !important;
+    width: 0 !important;
 }
 .cm-fat-cursor div.CodeMirror-cursor {
-		width: 10px !important;
-		border: 0 !important;
-		background: var(--ctp-frappe-rosewater) !important;
+    width: 10px !important;
+    border: 0 !important;
+    background: #F2D5CF !important;
 }
 .cm-fat-cursor div.CodeMirror-cursors {
-		z-index: 1 !important;
+    z-index: 1 !important;
 }
 .cm-fat-cursor-mark {
-		background-color: rgba(150, 205, 251, 0.5) !important;
+    background-color: rgba(133, 193, 220, 0.50) !important;
 }
 
 .cm-animate-fat-cursor {
-		width: auto !important;
-		border: 0;
-		background-color: var(--ctp-frappe-rosewater) !important;
+    width: auto !important;
+    border: 0;
+    background-color: #F2D5CF !important;
 }
 
 /* Rich Markdown Extra CSS Classes
@@ -532,42 +506,42 @@ Please opt in "Add additional CSS classes for enhanced customization" in plugin
 settings, see https://github.com/CalebJohn/joplin-rich-markdown#extra-css */
 
 .cm-header.cm-rm-header-token {
-	color: var(--ctp-frappe-green) !important;
+  color: #A6D189 !important;
 }
 
 .cm-strong.cm-rm-strong-token {
-	color: var(--ctp-frappe-blue) !important;
+  color: #8CAAEE !important;
 }
 
 pre.cm-rm-blockquote.CodeMirror-line {
-	font-style: italic !important;
+  font-style: italic !important;
 }
 
 /* Command palette coloring */
 
 div.modal-dialog {
-	background-color: var(--ctp-frappe-mantle) !important;
+  background-color: #292C3C !important;
 }
 
 .modal-dialog > div > input {
-	background-color: var(--ctp-frappe-crust) !important;
-	color: var(--ctp-frappe-text) !important;
+  background-color: #232634 !important;
+  color: #C6D0F5 !important;
 }
 
 .modal-dialog > .item-list {
-	background-color: var(--ctp-frappe-crust) !important;
-	color: var(--ctp-frappe-text) !important;
+  background-color: #232634 !important;
+  color: #C6D0F5 !important;
 
 }
 
 .modal-dialog > .item-list div[class="selected"] {
-	background-color: var(--ctp-frappe-surface2) !important;
+  background-color: #626880 !important;
 }
 
 .modal-dialog > .item-list div[class="selected"] > div {
-	color: var(--ctp-frappe-text) !important;
+  color: #C6D0F5 !important;
 }
 
 .modal-dialog > .item-list > * {
-	color: var(--ctp-frappe-text) !important;
+  color: #C6D0F5 !important;
 }
diff --git a/src/frappe/userstyle.css b/src/frappe/userstyle.css
index 2f9a5b6..de1a54c 100644
--- a/src/frappe/userstyle.css
+++ b/src/frappe/userstyle.css
@@ -1,38 +1,12 @@
 /* Style for rendered Markdown */
 :root {
-  --ctp-frappe-rosewater: #f2d5cf;
-	--ctp-frappe-flamingo: #eebebe;
-	--ctp-frappe-pink: #f4b8e4;
-	--ctp-frappe-mauve: #ca9ee6;
-	--ctp-frappe-red: #e78284;
-	--ctp-frappe-maroon: #ea999c;
-	--ctp-frappe-peach: #ef9f76;
-	--ctp-frappe-yellow: #e5c890;
-	--ctp-frappe-green: #a6d189;
-	--ctp-frappe-teal: #81c8be;
-	--ctp-frappe-sky: #99d1db;
-	--ctp-frappe-sapphire: #85c1dc;
-	--ctp-frappe-blue: #8caaee;
-	--ctp-frappe-lavender: #babbf1;
-	--ctp-frappe-text: #c6ceef;
-	--ctp-frappe-subtext1: #b5bddc;
-	--ctp-frappe-subtext0: #a5acc9;
-	--ctp-frappe-overlay2: #949bb7;
-	--ctp-frappe-overlay1: #838aa4;
-	--ctp-frappe-overlay0: #737891;
-	--ctp-frappe-surface2: #62677e;
-	--ctp-frappe-surface1: #51566c;
-	--ctp-frappe-surface0: #414559;
-	--ctp-frappe-base: #303446;
-	--ctp-frappe-mantle: #292c3c;
-	--ctp-frappe-crust: #232634;
   --white: #D9E0EE;
   --black: #000000;
   --light: #C9CFFF;
   --lighter-grey: #C3BAC6;
   --light-grey: #988BA2;
 
-	--font-face: "Noto Sans", Arial, Helvetica, sans-serif;
+  --font-face: "Noto Sans", Arial, Helvetica, sans-serif;
   --font-mono: "Roboto Mono", Courier, monospace;
   --font-size: 13px;
   --icon-size: 16px;
@@ -45,29 +19,28 @@
   --opacity-0-8: 0.8;
 }
 
-
 #rendered-md, body, th, td {
-  background-color: var(--ctp-frappe-base) !important;
+  background-color: #303446 !important;
   font-family: var(--font-face) !important;
 }
 
 p, ul, ol, li {
-  color: var(--ctp-frappe-text) !important;
+  color: #C6D0F5 !important;
 }
 
 strong {
-  color: var(--ctp-frappe-text) !important;
+  color: #C6D0F5 !important;
 }
 
 hr {
   border: none;
-  border-bottom: 1px solid var(--ctp-frappe-base) !important;
+  border-bottom: 1px solid #303446 !important;
   margin: 2.5em 0 !important;
 }
 
 /* Scrollbars */
 ::-webkit-scrollbar-thumb {
-  background-color: var(--ctp-frappe-base) !important;
+  background-color: #303446 !important;
   border-radius: var(--scroll-radius) !important;
 }
 
@@ -76,7 +49,7 @@ hr {
 *********************************************************************************/
 
 h1 {
-  border-bottom: 1px solid var(--ctp-frappe-base) !important;
+  border-bottom: 1px solid #303446 !important;
   font-weight: var(--bolder) !important;
 }
 
@@ -90,7 +63,7 @@ h2, h3, h4, h5, h6 {
 *********************************************************************************/
 
 a {
-  color: var(--ctp-frappe-rosewater) !important;
+  color: #F2D5CF !important;
   text-decoration: underline !important;
 }
 
@@ -100,7 +73,7 @@ a:hover {
 
 /* Joplin icon in Joplin link */
 .resource-icon {
-  background-color: var(--ctp-frappe-rosewater) !important;
+  background-color: #F2D5CF !important;
 }
 
 /*********************************************************************************
@@ -108,10 +81,10 @@ a:hover {
 *********************************************************************************/
 
 pre, .hljs {
-  background-color: var(--ctp-frappe-mantle) !important;
+  background-color: #292C3C !important;
   font-family: var(--font-mono) !important;
   padding: 10px !important;
-  color: var(--ctp-frappe-text) !important;
+  color: #C6D0F5 !important;
   font-size: 14px !important;
   overflow: scroll !important;
 }
@@ -121,7 +94,7 @@ pre, .hljs {
   background-color: transparent !important;
   border: 0 !important;
   font-family: var(--font-mono) !important;
-  color: var(--ctp-frappe-yellow) !important;
+  color: #E5C890 !important;
   font-size: 14px !important;
 }
 
@@ -130,13 +103,13 @@ pre, .hljs {
 *********************************************************************************/
 
 blockquote {
-  background-color: var(--ctp-frappe-surface0) !important;
+  background-color: #414559 !important;
   padding: 10px !important;
   color: var(--light) !important;
   font-size: 14px !important;
   font-style: italic !important;
   border: 0 !important;
-  border-left: 5px solid var(--ctp-frappe-mantle) !important;
+  border-left: 5px solid #292C3C !important;
 }
 
 /*********************************************************************************
@@ -144,15 +117,15 @@ blockquote {
 *********************************************************************************/
 
 th {
-  border: 1px solid var(--ctp-frappe-text) !important;
-  color: var(--ctp-frappe-text) !important;
-  border-bottom: 1px solid var(--ctp-frappe-text) !important;
+  border: 1px solid #C6D0F5 !important;
+  color: #C6D0F5 !important;
+  border-bottom: 1px solid #C6D0F5 !important;
 }
 
 td {
-  border: 1px solid var(--ctp-frappe-text) !important;
-  color: var(--ctp-frappe-text) !important;
-  border-bottom: 1px solid var(--ctp-frappe-text) !important;
+  border: 1px solid #C6D0F5 !important;
+  color: #C6D0F5 !important;
+  border-bottom: 1px solid #C6D0F5 !important;
 }
 
 /*********************************************************************************
@@ -160,18 +133,18 @@ td {
 *********************************************************************************/
 
 ::selection {
-	background-color: var(--ctp-frappe-lavender) !important;
-  color: var(--ctp-frappe-crust) !important;
+  background-color: #BABBF1 !important;
+  color: #232634 !important;
 }
 
 mark, mark strong {
-  background: var(--ctp-frappe-yellow) !important;
-  color: var(--ctp-frappe-crust) !important;
+  background: #E5C890 !important;
+  color: #232634 !important;
 }
 
 /* Highlighted searched item */
 mark[data-markjs] {
-  background-color: var(--ctp-frappe-lavender) !important;
+  background-color: #BABBF1 !important;
 }
 
 /*********************************************************************************
@@ -189,8 +162,8 @@ mark[data-markjs] {
 /* Container for spoiler title */
 #spoiler-block-title {
   font-family: var(--font-face) !important;
-  color: var(--ctp-frappe-text) !important;
-  background-color: var(--ctp-frappe-mantle) !important;
+  color: #C6D0F5 !important;
+  background-color: #292C3C !important;
   border-radius: 0px;
 }
 
@@ -198,17 +171,17 @@ mark[data-markjs] {
 #spoiler-block-body {
   font-family: var(--font-face) !important;
   color: var(--light) !important;
-  background-color: var(--ctp-frappe-mantle) !important;
+  background-color: #292C3C !important;
   border-radius: 0px;
 }
 
 /* Styling of the spoiler block body */
 .summary-content {
-  background-color: var(--ctp-frappe-mantle) !important;
+  background-color: #292C3C !important;
 }
 
 .summary-title:before {
-  color: var(--ctp-frappe-lavender) !important;
+  color: #BABBF1 !important;
 }
 
 /*********************************************************************************
@@ -259,7 +232,7 @@ mark[data-markjs] {
   }
 
   a {
-    color: var(--ctp-frappe-red) !important;
+    color: #E78284 !important;
     text-decoration: underline !important;
   }
 
@@ -268,7 +241,7 @@ mark[data-markjs] {
   background-color: #F8F8F8 !important;
   border: 0 !important;
   font-family: var(--font-mono) !important;
-  /* color: var(--ctp-frappe-yellow) !important; */
+  /* color: #E5C890 !important; */
   font-size: 14px !important;
 }
 
@@ -276,7 +249,7 @@ pre, .hljs {
   background-color: #F8F8F8 !important;
   font-family: var(--font-mono) !important;
   padding: 10px !important;
-  color: var(--ctp-frappe-crust) !important;
+  color: #232634 !important;
   font-size: 14px !important;
   overflow: scroll !important;
 }
@@ -284,7 +257,7 @@ pre, .hljs {
 blockquote {
   background-color: #F8F8F8 !important;
   padding: 10px !important;
-  color: var(--ctp-frappe-crust) !important;
+  color: #232634 !important;
   font-size: 14px !important;
   font-style: italic !important;
   border: 0 !important;
diff --git a/src/latte/userchrome.css b/src/latte/userchrome.css
index 8a2ebe7..ee8009b 100644
--- a/src/latte/userchrome.css
+++ b/src/latte/userchrome.css
@@ -1,45 +1,19 @@
 /* Original theme at https://github.com/stysebae/joplin-vsc-material-theme, modified for Catppuccin. */
 /* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */
+
 :root {
-	--ctp-latte-rosewater: #de9584;
-	--ctp-latte-flamingo: #dd7878;
-	--ctp-latte-pink: #ec83d0;
-	--ctp-latte-mauve: #8839ef;
-	--ctp-latte-red: #d20f39;
-	--ctp-latte-maroon: #e64553;
-	--ctp-latte-peach: #fe640b;
-	--ctp-latte-yellow: #e49320;
-	--ctp-latte-green: #40a02b;
-	--ctp-latte-teal: #179299;
-	--ctp-latte-sky: #04a5e5;
-	--ctp-latte-sapphire: #209fb5;
-	--ctp-latte-blue: #2a6ef5;
-	--ctp-latte-lavender: #7287fd;
-	--ctp-latte-text: #4c4f69;
-	--ctp-latte-subtext1: #5c5f77;
-	--ctp-latte-subtext0: #6c6f85;
-	--ctp-latte-overlay2: #7c7f93;
-	--ctp-latte-overlay1: #8c8fa1;
-	--ctp-latte-overlay0: #9ca0b0;
-	--ctp-latte-surface2: #acb0be;
-	--ctp-latte-surface1: #bcc0cc;
-	--ctp-latte-surface0: #ccd0da;
-	--ctp-latte-base: #eff1f5;
-	--ctp-latte-mantle: #e6e9ef;
-	--ctp-latte-crust: #dce0e8;
-	--font-face: "Noto Sans", Arial, Helvetica, sans-serif;
-	--font-mono: "Roboto Mono", Courier, monospace;
-	--font-size: 13px;
-	--icon-size: 16px;
-
-	--regular: 400;
-	--bolder: 600;
-
-	--scroll-radius: 3px;
-
-	--opacity-0-8: 0.8;
-}
+  --font-face: "Noto Sans", Arial, Helvetica, sans-serif;
+  --font-mono: "Roboto Mono", Courier, monospace;
+  --font-size: 13px;
+  --icon-size: 16px;
+
+  --regular: 400;
+  --bolder: 600;
 
+  --scroll-radius: 3px;
+
+  --opacity-0-8: 0.8;
+}
 
 /* Font used by Joplin */
 * {
@@ -47,7 +21,7 @@
 }
 
 html, body {
-  background-color: var(--ctp-latte-base) !important;
+  background-color: #EFF1F5 !important;
   font-size: var(--font-size) !important;
   font-weight: var(--regular) !important;
   color: var(--light) !important;
@@ -57,7 +31,7 @@ html, body {
     background: #6B6B6B !important;
 }
 .rli-root {
-  background-color: var(--ctp-latte-base) !important;
+  background-color: #EFF1F5 !important;
 }
 
 /* Icons */
@@ -68,12 +42,12 @@ html, body {
 }
 
 ::placeholder {
-  color: var(--ctp-latte-lavender) !important;
+  color: #7287FD !important;
 }
 
 /* Scrollbars */
 ::-webkit-scrollbar-thumb {
-  background-color: var(--ctp-latte-surface0) !important;
+  background-color: #CCD0DA !important;
   border-radius: var(--scroll-radius) !important;
 }
 
@@ -83,7 +57,7 @@ html, body {
 
 /* General panel style */
 .resizableLayoutItem > div {
-  background-color: var(--ctp-latte-base) !important;
+  background-color: #EFF1F5 !important;
 }
 
 /*********************************************************************************
@@ -91,15 +65,11 @@ html, body {
 *********************************************************************************/
 
 .sidebar {
-  background-color: var(--ctp-latte-crust) !important;
+  background-color: #DCE0E8 !important;
   text-transform: uppercase;
   font-weight: var(--bolder);
 }
 
-.bWPSUP > i, .bWPSUP > span {
-  color: var(--ctp-latte-text) !important;
-}
-
 /* Hide "All notes" icon
  * Comment this next block if you want the "All notes" icon */
 i.icon-notes {
@@ -110,76 +80,65 @@ i.icon-notes {
 
 /* "Add new notebook" button */
 .sidebar > div > div > button span {
-  color: var(--ctp-latte-lavender) !important;
-}
-div.sc-fzoyTs.eIbLtS span.sc-fzpmMD.eNteRa {
-	color: var(--ctp-latte-text) !important;
-}
-div.sc-fzoyTs.eIbLtS i.sc-fzoNJl.blQlSy.icon-notebooks, i.sc-fzoNJl.blQlSy.icon-tags::before {
-	color: var(--ctp-latte-text) !important;
+  color: #7287FD !important;
 }
+
 .sidebar > div > div > button:hover {
   opacity: var(--opacity-0-8);
 }
 .folders .list-item-container {
-    background-color: var(--ctp-latte-crust) !important;
+    background-color: #DCE0E8 !important;
 }
 .folders .list-item-container:hover {
-  background-color: var(--ctp-latte-overlay0) !important;
-}
-div.sc-fzqBkg.dDQgvd.note-count-label {
-	color: var(--ctp-latte-text) !important;
+  background-color: #9CA0B0 !important;
 }
 
 .folders .list-item-container a {
   text-transform: initial;
-  color: var(--ctp-latte-text) !important;
+  color: #4C4F69 !important;
   font-weight: var(--regular);
 }
 
 .folders .list-item-container a:focus {
-  color: var(--ctp-latte-text) !important;
-  background-color: var(--ctp-latte-base) !important;
+  color: #4C4F69 !important;
+  background-color: #EFF1F5 !important;
 }
 
 .folders .list-item-container a:hover {
-  color: var(--ctp-latte-text) !important;
+  color: #4C4F69 !important;
 }
 
-.note-count-label {
-  color: var(--ctp-latte-subtext1) !important;
-}
 /* TAGS */
 .tags .list-item-container {
     display: inline-block;
     line-height: 0 !important;
     padding: 0 !important;
     height: auto !important;
-    background-color: var(--ctp-latte-crust) !important;
+    background-color: #DCE0E8 !important;
 }
 .tags .list-item-container:hover {
   display: inline-block;
   line-height: 0 !important;
   padding: 0 !important;
   height: auto !important;
-  background-color: var(--ctp-latte-overlay0) !important;
+  background-color: #9CA0B0 !important;
 }
 
 .tags .list-item-container a {
   padding-left: 12px !important;
   text-transform: initial;
-  color: var(--ctp-latte-text) !important;
+  color: #4C4F69 !important;
   font-weight: var(--regular);
 }
 
 .tags .list-item-container a:focus {
-  color: var(--ctp-latte-text) !important;
-  background-color: var(--ctp-latte-base) !important;
+  color: #4C4F69 !important;
+  background-color: #EFF1F5 !important;
 }
 
 .tags .list-item-container a:hover {
-  color: var(--ctp-latte-text) !important;
-  background-color: var(--ctp-latte-overlay0) !important;
+  color: #4C4F69 !important;
+  background-color: #9CA0B0 !important;
 }
 
 /* SYNCHRONIZATION */
@@ -189,7 +148,7 @@ div.sc-fzqBkg.dDQgvd.note-count-label {
 }
 
 .sidebar > div:last-of-type > button {
-  background-color: var(--ctp-latte-lavender) !important;
+  background-color: #7287FD !important;
   border: 0px !important;
   text-transform: uppercase;
   font-size: var(--font-size) !important;
@@ -200,29 +159,21 @@ div.sc-fzqBkg.dDQgvd.note-count-label {
 }
 
 .sidebar > div:last-of-type > button > span {
-  /* color: var(--ctp-latte-crust) !important; */
-  color: var(--ctp-latte-text) !important;
-}
-.sc-fzoYkl.gYkyEX {
-	color: var(--ctp-latte-text) !important;
+  color: #DCE0E8 !important;
 }
 
-/* Sync complete information */
-.hdpRiC {
-  color: var(--ctp-latte-text) !important;
-}
 /*********************************************************************************
 *NOTE LIST
 *********************************************************************************/
 
 .note-list {
-  background-color: var(--ctp-latte-mantle) !important;
+  background-color: #E6E9EF !important;
   border: none !important;
 }
 
 /* Empty notelist */
 .cLdGCO, .cLdGCO > div {
-  background-color: var(--ctp-latte-mantle) !important;
+  background-color: #E6E9EF !important;
 }
 
 /* Remove border - introduced in 1.3.7 */
@@ -233,18 +184,18 @@ div.sc-fzqBkg.dDQgvd.note-count-label {
 /* BUTTONS SEARCH, SORT NOTES, NEW NOTE AND NEW TASK */
 
 div[height="50"] {
-  background-color: var(--ctp-latte-mantle) !important;
+  background-color: #E6E9EF !important;
 }
 
 div[height="50"] input {
   border: none !important;
-  color: var(--ctp-latte-text) !important;
-  background-color: var(--ctp-latte-mantle) !important;
+  color: #4C4F69 !important;
+  background-color: #E6E9EF !important;
 }
 
 div[height="50"] button {
   background: transparent !important;
-  color: var(--ctp-latte-text) !important;
+  color: #4C4F69 !important;
   border: 0 !important;
 }
 
@@ -253,54 +204,49 @@ div[height="50"] button:hover {
 }
 
 div[height="50"] button span {
-  color: var(--ctp-latte-text) !important;
-}
-
-.chwTAE {
-  background-color: var(--ctp-latte-mantle) !important;
+  color: #4C4F69 !important;
 }
 
-.sc-hCPjZK.fJjcQe {
-  background-color: var(--ctp-latte-mantle) !important;
+.sc-hCPjZK.fJjcQe{
+  background-color: #E6E9EF !important;
 }
 .new-note-todo-buttons > button {
-  background-color: var(--ctp-latte-lavender) !important;
+  background-color: #7287FD !important;
   border: none !important;
 }
 .new-todo-button > span {
-  color: var(--ctp-latte-mantle) !important;
+  color: #DCE0E8 !important;
 }
 
 .search-bar {
-  background-color: var(--ctp-latte-mantle) !important;
+  background-color: #DCE0E8 !important;
 }
 
 .icon-search {
-  color: var(--ctp-latte-lavender) !important;
+  color: #7287FD !important;
 }
 
 .sort-order-reverse-button {
-  background-color: var(--ctp-latte-mantle) !important;
+  background-color: #DCE0E8 !important;
 }
 .sort-order-reverse-button {
-  background-color: var(--ctp-latte-mantle) !important;
+  background-color: #DCE0E8 !important;
 }
 
 .fa-calendar-alt {
-  color: var(--ctp-latte-lavender) !important;
+  color: #7287FD !important;
 }
 .fa-long-arrow-alt-up {
-  color: var(--ctp-latte-lavender) !important;
+  color: #7287FD !important;
 }
-
 /* LIST OF NOTES */
 
 .note-list .list-item-container {
-  background-color: var(--ctp-latte-mantle) !important;
+  background-color: #E6E9EF !important;
 }
 
 .note-list .list-item-container:hover {
-  background-color: var(--ctp-latte-overlay1) !important;
+  background-color: #8C8FA1 !important;
 }
 
 .item-list.note-list .list-item-container::before {
@@ -309,17 +255,17 @@ div[height="50"] button span {
 
 .note-list .list-item-container a {
   text-transform: initial;
-  color: var(--ctp-latte-text) !important;
+  color: #4C4F69 !important;
   font-weight: var(--regular);
 }
 
 .note-list .list-item-container a:focus {
-  color: var(--ctp-latte-text) !important;
-  background-color: var(--ctp-latte-base) !important;
+  color: #4C4F69 !important;
+  background-color: #EFF1F5 !important;
 }
 
 .note-list .list-item-container a:hover {
-  color: var(--ctp-latte-text) !important;
+  color: #4C4F69 !important;
 }
 
 /* Add "..." to notes with long titles */
@@ -333,40 +279,30 @@ div[height="50"] button span {
 *********************************************************************************/
 
 /* EDITOR TOOLBAR */
-input.title-input {
-	padding-top: 5px;
-	color: var(--ctp-latte-text) !important;
-	background-color: var(--ctp-latte-base) !important;
-
-}
 
-.editor-toolbar {
-  background-color: transparent !important;
+/* Title */
+/* Changes frequently with updates, need to keep tabs */
+.rli-editor .cCOtNv > input {
+  padding-top: 5px;
+  background-color: #EFF1F5 !important;
 }
-/* Editor toolbar buttons */
 
-.editor-toolbar > div > a > span {
-	  color: var(--ctp-latte-text) !important;
+.title-input {
+  background-color: #EFF1F5 !important;
+  color: #4C4F69 !important;
 }
 
-.editor-toolbar > div > a > span::hover {
-	color: var(--ctp-latte-lavender) !important;
+.editor-toolbar {
+  background-color: transparent !important;
 }
 
 .editor-toolbar > div > a:hover {
   opacity: var(--opacity-0-8);
-  color: var(--ctp-latte-lavender) !important;
-  background-color: var(--ctp-latte-overlay0) !important;
 }
 
 /* Hide "Spell checker" button */
 .editor-toolbar a[title="Spell checker"] {
-display: none !important;
-}
-
-div.sc-AxirZ.hagDvo, div.sc-AxirZ.hagDvo > div {
-  background-color: var(--ctp-latte-mantle) !important;
-  color: var(--ctp-latte-text) !important;
+ display: none !important;
 }
 
 /* Hide "Markdown/Richtext editor" Button */
@@ -374,13 +310,14 @@ div.sc-AxirZ.hagDvo, div.sc-AxirZ.hagDvo > div {
  display: none !important;
 }
 
+/* Hide the Toggle editors button */
 .editor-toolbar button[title="Toggle editors"] {
   display: none !important;
 }
 
 /* Breadcrumbs (In:...) - Used in tag listings */
 .cJOYJm {
-  background-color: var(--ctp-latte-lavender) !important;
+  background-color: #7287FD !important;
   margin: 0px !important;
   padding: 5px !important;
   font-size: var(--font-size) !important;
@@ -393,17 +330,22 @@ div.sc-AxirZ.hagDvo, div.sc-AxirZ.hagDvo > div {
 /* CONTENT */
 /* Empty notebook */
 .rli-editor > div > div:empty {
-  background-color: var(--ctp-latte-base) !important;
+  background-color: #EFF1F5 !important;
 }
 
 /* Editor layout splitter */
 .rli-editor > div > div > div > div > div > div > div:last-of-type {
-  border-color: var(--ctp-latte-base) !important;
+  border-color: #EFF1F5 !important;
+}
+
+div.sc-AxirZ.hagDvo, div.sc-AxirZ.hagDvo > div {
+  background-color: #E6E9EF !important;
+  color: #4C4F69 !important;
 }
 
 /* NOTE SEARCH BAR */
 .note-search-bar, .note-search-bar > div > div {
-  background-color: var(--ctp-latte-base) !important;
+  background-color: #EFF1F5 !important;
   width: 100%;
   border: 0 !important;
 }
@@ -411,8 +353,8 @@ div.sc-AxirZ.hagDvo, div.sc-AxirZ.hagDvo > div {
 .note-search-bar input {
   border: 0 !important;
   padding: 5px;
-  color: var(--ctp-latte-text) !important;
-  background-color: var(--ctp-latte-base) !important;
+  color: #4C4F69 !important;
+  background-color: #EFF1F5 !important;
 }
 
 /* TAGS */
@@ -421,8 +363,8 @@ div.sc-AxirZ.hagDvo, div.sc-AxirZ.hagDvo > div {
 }
 
 .tag-list > span {
-  color: var(--ctp-latte-lavender) !important;
-  background-color: var(--ctp-latte-crust) !important;
+  color: #7287FD !important;
+  background-color: #DCE0E8 !important;
 }
 
 /* Hide "Click to add tags..."*/
@@ -435,149 +377,128 @@ a[Title="Tags"] + div > span {
 *********************************************************************************/
 
 .cm-s-material-darker.CodeMirror {
-  background-color: var(--ctp-latte-base) !important;
-  color: var(--ctp-latte-text) !important;
+  background-color: #EFF1F5 !important;
+  color: #4C4F69 !important;
 }
 
-.CodeMirror-lines {
-  background-color: var(--ctp-latte-base) !important;
-}
 /* Header */
 .cm-header {
-  color: var(--ctp-latte-lavender) !important;
+  color: #7287FD !important;
 }
 
 /* Italics/Emphasis, Bold, BoldItalics */
 .cm-em, .cm-strong, .cm-strong.cm-em {
-  color: var(--ctp-latte-text) !important;
+  color: #4C4F69 !important;
 }
 
 /* Lists (Bullet/number/todo) */
 .cm-variable-2, .cm-variable-3, .cm-keyword {
-  color: var(--ctp-latte-text) !important;
+  color: #4C4F69 !important;
 }
 
 .cm-s-material-darker .cm-variable-2.cm-rm-list-token {
-	color: var(--ctp-latte-text) !important;
-}
-
-.CodeMirror-vscrollbar {
-  background-color: var(--ctp-latte-base) !important;
+  color: #4C4F69 !important;
 }
 
 /* Links (link) */
 .cm-url {
-  color: var(--ctp-latte-rosewater) !important;
+  color: #DC8A78 !important;
   opacity: 1;
   text-decoration: underline;
 }
 
 /* Links (text) */
 .cm-link-text {
-  color: var(--ctp-latte-rosewater) !important;
+  color: #DC8A78 !important;
 }
 pre.CodeMirror-line {
-    color: var(--ctp-latte-text) !important;
+    color: #4C4F69 !important;
     background-color: none !important;
 }
 /* Image link in editor */
 span.cm-string.cm-url.cm-overlay.cm-rm-link.cm-overlay.cm-rm-image {
-  color: var(--ctp-latte-lavender) !important;
+  color: #7287FD !important;
 }
 /* Comment outside code block */
 pre.CodeMirror-line span.cm-comment {
-	color: var(--ctp-latte-overlay1) !important;
+  color: #8C8FA1 !important;
   background-color: none !important;
   border: 0 !important;
 }
 
 /* Codeblock selection colour */
-
 /* For some reason, the CodeMirror selection does not pick the colour correctly, left for now. */
 pre.CodeMirror-line span.CodeMirror-selectedtext {
-	/* background: var(--ctp-latte-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #ACB0BE !important; */
+  background: #6B6B6B !important;
 }
 
 div[class^="cm-jn-code-block-background "]::selection {
-  background-color: var(--ctp-latte-base) !important;
-  border-color: var(--ctp-latte-base) !important;
+  background-color: #EFF1F5 !important;
+  border-color: #EFF1F5 !important;
 }
 
 pre.cm-jn-code-block.CodeMirror-line span.cm-comment.cm-jn-monospace.CodeMirror-selectedtext {
-	/* background: var(--ctp-latte-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #ACB0BE !important; */
+  background: #6B6B6B !important;
 }
 pre.cm-jn-code-block.CodeMirror-line::selection {
-	/* background: var(--ctp-latte-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #ACB0BE !important; */
+  background: #6B6B6B !important;
 }
 div.cm-jn-code-block-background.CodeMirror-linebackground::selection {
-	/* background: var(--ctp-latte-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #ACB0BE !important; */
+  background: #6B6B6B !important;
 }
 pre.cm-jn-code-block.CodeMirror-line::selection span {
-	/* background: var(--ctp-latte-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #ACB0BE !important; */
+  background: #6B6B6B !important;
 }
 
 div.CodeMirror span.cm-comment.cm-jn-inline-code {
-	background-color: transparent !important;
-	padding-right: 0 !important;
+  background-color: transparent !important;
+  padding-right: 0 !important;
   padding-left: 0 !important;
 }
 
 /* Code Block Text */
 div.CodeMirror span.cm-comment:not(.cm-jn-inline-code) {
-  color: var(--ctp-latte-text) !important;
-  background-color: transparent !important;
-}
-span.cm-string.cm-jn-monospace{
-	  color: var(--ctp-latte-green) !important;
-  background-color: transparent !important;
-}
-span.cm-meta.cm-jn-monospace, span.cm-builtin.cm-jn-monospace, span.cm-type.cm-jn-monospace {
-	  color: var(--ctp-latte-yellow) !important;
+  color: #4C4F69 !important;
   background-color: transparent !important;
 }
 
 /* Code block background */
-
 div.CodeMirror div.cm-jn-code-block-background {
-    background-color: var(--ctp-latte-mantle) !important;
-}
-
-span.cm-operator.cm-jn-monospace {
-	color: var(--ctp-latte-blue) !important;
+    background-color: #E6E9EF !important;
 }
 
 /* Horizontal Line */
 .cm-hr {
-  color: var(--ctp-latte-overlay0) !important;
+  color: #9CA0B0 !important;
 }
 
 /* Cursor colour */
 .CodeMirror-cursor {
-    border-left: 1px solid var(--ctp-latte-rosewater) !important;
+    border-left: 1px solid #DC8A78 !important;
     border-right: none !important;
     width: 0 !important;
 }
 .cm-fat-cursor div.CodeMirror-cursor {
     width: 10px !important;
     border: 0 !important;
-    background: var(--ctp-latte-rosewater) !important;
+    background: #DC8A78 !important;
 }
 .cm-fat-cursor div.CodeMirror-cursors {
     z-index: 1 !important;
 }
 .cm-fat-cursor-mark {
-    background-color: rgba(150, 205, 251, 0.5) !important;
+    background-color: rgba(32, 159, 181, 0.50) !important;
 }
 
 .cm-animate-fat-cursor {
     width: auto !important;
     border: 0;
-    background-color: var(--ctp-latte-rosewater) !important;
+    background-color: #DC8A78 !important;
 }
 
 /* Rich Markdown Extra CSS Classes
@@ -585,11 +506,11 @@ Please opt in "Add additional CSS classes for enhanced customization" in plugin
 settings, see https://github.com/CalebJohn/joplin-rich-markdown#extra-css */
 
 .cm-header.cm-rm-header-token {
-  color: var(--ctp-latte-green) !important;
+  color: #40A02B !important;
 }
 
 .cm-strong.cm-rm-strong-token {
-  color: var(--ctp-latte-blue) !important;
+  color: #1E66F5 !important;
 }
 
 pre.cm-rm-blockquote.CodeMirror-line {
@@ -599,40 +520,28 @@ pre.cm-rm-blockquote.CodeMirror-line {
 /* Command palette coloring */
 
 div.modal-dialog {
-  background-color: var(--ctp-latte-mantle) !important;
+  background-color: #E6E9EF !important;
 }
 
 .modal-dialog > div > input {
-  background-color: var(--ctp-latte-crust) !important;
-  color: var(--ctp-latte-text) !important;
+  background-color: #DCE0E8 !important;
+  color: #4C4F69 !important;
 }
 
 .modal-dialog > .item-list {
-  background-color: var(--ctp-latte-crust) !important;
-  color: var(--ctp-latte-text) !important;
+  background-color: #DCE0E8 !important;
+  color: #4C4F69 !important;
 
 }
 
 .modal-dialog > .item-list div[class="selected"] {
-  background-color: var(--ctp-latte-surface2) !important;
-}
-
-.modal-dialog > .item-list div[class="selected"] > div > span {
-  color: var(--ctp-latte-text) !important;
-}
-
-.modal-dialog > .item-list div:not(div[class="selected"]) > div > span{
-  color: var(--ctp-latte-text) !important;
+  background-color: #ACB0BE !important;
 }
 
 .modal-dialog > .item-list div[class="selected"] > div {
-  color: var(--ctp-latte-text) !important;
-}
-
-.modal-dialog > .item-list > div:not(div[class="selected"]) > div {
-  color: var(--ctp-latte-text) !important;
+  color: #4C4F69 !important;
 }
 
-.fa-question-circle {
-  color: var(--ctp-latte-text) !important;
+.modal-dialog > .item-list > * {
+  color: #4C4F69 !important;
 }
diff --git a/src/latte/userstyle.css b/src/latte/userstyle.css
index 9c5b853..bec99d9 100644
--- a/src/latte/userstyle.css
+++ b/src/latte/userstyle.css
@@ -1,45 +1,17 @@
 /* Style for rendered Markdown */
-
 :root {
-  --ctp-latte-rosewater: #de9584;
-	--ctp-latte-flamingo: #dd7878;
-	--ctp-latte-pink: #ec83d0;
-	--ctp-latte-mauve: #8839ef;
-	--ctp-latte-red: #d20f39;
-	--ctp-latte-maroon: #e64553;
-	--ctp-latte-peach: #fe640b;
-	--ctp-latte-yellow: #e49320;
-	--ctp-latte-green: #40a02b;
-	--ctp-latte-teal: #179299;
-	--ctp-latte-sky: #04a5e5;
-	--ctp-latte-sapphire: #209fb5;
-	--ctp-latte-blue: #2a6ef5;
-	--ctp-latte-lavender: #7287fd;
-	--ctp-latte-text: #4c4f69;
-	--ctp-latte-subtext1: #5c5f77;
-	--ctp-latte-subtext0: #6c6f85;
-	--ctp-latte-overlay2: #7c7f93;
-	--ctp-latte-overlay1: #8c8fa1;
-	--ctp-latte-overlay0: #9ca0b0;
-	--ctp-latte-surface2: #acb0be;
-	--ctp-latte-surface1: #bcc0cc;
-	--ctp-latte-surface0: #ccd0da;
-	--ctp-latte-base: #eff1f5;
-	--ctp-latte-mantle: #e6e9ef;
-	--ctp-latte-crust: #dce0e8;
- --white: #D9E0EE;
+  --white: #D9E0EE;
   --black: #000000;
   --light: #C9CFFF;
   --lighter-grey: #C3BAC6;
   --light-grey: #988BA2;
 
-	--font-face: "Noto Sans", Arial, Helvetica, sans-serif;
+  --font-face: "Noto Sans", Arial, Helvetica, sans-serif;
   --font-mono: "Roboto Mono", Courier, monospace;
   --font-size: 13px;
   --icon-size: 16px;
 
   --regular: 400;
-  --bolder: 500;
   --bolder: 600;
 
   --scroll-radius: 3px;
@@ -48,27 +20,27 @@
 }
 
 #rendered-md, body, th, td {
-  background-color: var(--ctp-latte-base) !important;
+  background-color: #EFF1F5 !important;
   font-family: var(--font-face) !important;
 }
 
 p, ul, ol, li {
-  color: var(--ctp-latte-text) !important;
+  color: #4C4F69 !important;
 }
 
 strong {
-  color: var(--ctp-latte-text) !important;
+  color: #4C4F69 !important;
 }
 
 hr {
   border: none;
-  border-bottom: 1px solid var(--ctp-latte-base) !important;
+  border-bottom: 1px solid #EFF1F5 !important;
   margin: 2.5em 0 !important;
 }
 
 /* Scrollbars */
 ::-webkit-scrollbar-thumb {
-  background-color: var(--ctp-latte-base) !important;
+  background-color: #EFF1F5 !important;
   border-radius: var(--scroll-radius) !important;
 }
 
@@ -77,15 +49,13 @@ hr {
 *********************************************************************************/
 
 h1 {
-  color: var(--ctp-latte-text) !important;
-  border-bottom: 1px solid var(--ctp-latte-base) !important;
+  border-bottom: 1px solid #EFF1F5 !important;
   font-weight: var(--bolder) !important;
 }
 
 h2, h3, h4, h5, h6 {
-  color: var(--ctp-latte-text) !important;
   border-bottom: 0 !important;
-  font-weight: var(--bold) !important;
+  font-weight: var(--regular) !important;
 }
 
 /*********************************************************************************
@@ -93,7 +63,7 @@ h2, h3, h4, h5, h6 {
 *********************************************************************************/
 
 a {
-  color: var(--ctp-latte-rosewater) !important;
+  color: #DC8A78 !important;
   text-decoration: underline !important;
 }
 
@@ -103,7 +73,7 @@ a:hover {
 
 /* Joplin icon in Joplin link */
 .resource-icon {
-  background-color: var(--ctp-latte-rosewater) !important;
+  background-color: #DC8A78 !important;
 }
 
 /*********************************************************************************
@@ -111,10 +81,10 @@ a:hover {
 *********************************************************************************/
 
 pre, .hljs {
-  background-color: var(--ctp-latte-mantle) !important;
+  background-color: #E6E9EF !important;
   font-family: var(--font-mono) !important;
   padding: 10px !important;
-  color: var(--ctp-latte-text) !important;
+  color: #4C4F69 !important;
   font-size: 14px !important;
   overflow: scroll !important;
 }
@@ -124,46 +94,38 @@ pre, .hljs {
   background-color: transparent !important;
   border: 0 !important;
   font-family: var(--font-mono) !important;
-  color: var(--ctp-latte-blue) !important;
+  color: #DF8E1D !important;
   font-size: 14px !important;
 }
-pre, .hljs-params {
-	color: var(--ctp-latte-red) !important;
-}
-pre, .hljs-string {
-	color: var(--ctp-latte-blue	) !important;
-}
-pre, .hljs-built_in {
-	color: var(--ctp-latte-yellow) !important;
-}
 
 /*********************************************************************************
 * BLOCKQUOTE
 *********************************************************************************/
 
 blockquote {
-  background-color: var(--ctp-latte-surface0) !important;
+  background-color: #CCD0DA !important;
   padding: 10px !important;
   color: var(--light) !important;
   font-size: 14px !important;
   font-style: italic !important;
   border: 0 !important;
-  border-left: 5px solid var(--ctp-latte-mantle) !important;
+  border-left: 5px solid #E6E9EF !important;
 }
 
 /*********************************************************************************
 * TABLES
 *********************************************************************************/
+
 th {
-  border: 1px solid var(--ctp-latte-text) !important;
-  color: var(--ctp-latte-text) !important;
-  border-bottom: 1px solid var(--ctp-latte-text) !important;
+  border: 1px solid #4C4F69 !important;
+  color: #4C4F69 !important;
+  border-bottom: 1px solid #4C4F69 !important;
 }
 
 td {
-  border: 1px solid var(--ctp-latte-text) important;
-  color: var(--ctp-latte-text) !important;
-  border-bottom: 1px solid var(--ctp-latte-text) !important;
+  border: 1px solid #4C4F69 !important;
+  color: #4C4F69 !important;
+  border-bottom: 1px solid #4C4F69 !important;
 }
 
 /*********************************************************************************
@@ -171,18 +133,18 @@ td {
 *********************************************************************************/
 
 ::selection {
-	background-color: var(--ctp-latte-lavender) !important;
-  color: var(--ctp-latte-crust) !important;
+  background-color: #7287FD !important;
+  color: #DCE0E8 !important;
 }
 
 mark, mark strong {
-  background: var(--ctp-latte-yellow) !important;
-  color: var(--ctp-latte-crust) !important;
+  background: #DF8E1D !important;
+  color: #DCE0E8 !important;
 }
 
 /* Highlighted searched item */
 mark[data-markjs] {
-  background-color: var(--ctp-latte-lavender) !important;
+  background-color: #7287FD !important;
 }
 
 /*********************************************************************************
@@ -200,8 +162,8 @@ mark[data-markjs] {
 /* Container for spoiler title */
 #spoiler-block-title {
   font-family: var(--font-face) !important;
-  color: var(--ctp-latte-text) !important;
-  background-color: var(--ctp-latte-mantle) !important;
+  color: #4C4F69 !important;
+  background-color: #E6E9EF !important;
   border-radius: 0px;
 }
 
@@ -209,17 +171,17 @@ mark[data-markjs] {
 #spoiler-block-body {
   font-family: var(--font-face) !important;
   color: var(--light) !important;
-  background-color: var(--ctp-latte-mantle) !important;
+  background-color: #E6E9EF !important;
   border-radius: 0px;
 }
 
 /* Styling of the spoiler block body */
 .summary-content {
-  background-color: var(--ctp-latte-mantle) !important;
+  background-color: #E6E9EF !important;
 }
 
 .summary-title:before {
-  color: var(--ctp-latte-lavender) !important;
+  color: #7287FD !important;
 }
 
 /*********************************************************************************
@@ -241,7 +203,6 @@ mark[data-markjs] {
   strong {
     color: var(--black) !important;
   }
-
   th {
   border: 1px solid var(--black) !important;
   color: var(--black) !important;
@@ -271,7 +232,7 @@ mark[data-markjs] {
   }
 
   a {
-    color: var(--ctp-latte-red) !important;
+    color: #D20F39 !important;
     text-decoration: underline !important;
   }
 
@@ -280,23 +241,23 @@ mark[data-markjs] {
   background-color: #F8F8F8 !important;
   border: 0 !important;
   font-family: var(--font-mono) !important;
-  /* color: var(--ctp-latte-yellow) !important; */
+  /* color: #DF8E1D !important; */
   font-size: 14px !important;
 }
 
 pre, .hljs {
-  background-color: #F8F8F8!important;
+  background-color: #F8F8F8 !important;
   font-family: var(--font-mono) !important;
   padding: 10px !important;
-  color: var(--ctp-latte-crust) !important;
+  color: #DCE0E8 !important;
   font-size: 14px !important;
   overflow: scroll !important;
 }
 
 blockquote {
-  background-color: #F8F8F8!important;
+  background-color: #F8F8F8 !important;
   padding: 10px !important;
-  color: var(--ctp-latte-crust) !important;
+  color: #DCE0E8 !important;
   font-size: 14px !important;
   font-style: italic !important;
   border: 0 !important;
diff --git a/src/macchiato/userchrome.css b/src/macchiato/userchrome.css
index c911838..d2b0e68 100644
--- a/src/macchiato/userchrome.css
+++ b/src/macchiato/userchrome.css
@@ -2,79 +2,53 @@
 /* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */
 
 :root {
-	--ctp-macchiato-rosewater: #f4dbd6;
-	--ctp-macchiato-flamingo: #f0c6c6;
-	--ctp-macchiato-pink: #f5bde6;
-	--ctp-macchiato-mauve: #c6a0f6;
-	--ctp-macchiato-red: #ed8796;
-	--ctp-macchiato-maroon: #ee99a0;
-	--ctp-macchiato-peach: #f5a97f;
-	--ctp-macchiato-yellow: #eed49f;
-	--ctp-macchiato-green: #a6da95;
-	--ctp-macchiato-teal: #8bd5ca;
-	--ctp-macchiato-sky: #91d7e3;
-	--ctp-macchiato-sapphire: #7dc4e4;
-	--ctp-macchiato-blue: #8aadf4;
-	--ctp-macchiato-lavender: #b7bdf8;
-	--ctp-macchiato-text: #c5cff5;
-	--ctp-macchiato-subtext1: #b3bce0;
-	--ctp-macchiato-subtext0: #a1aacb;
-	--ctp-macchiato-overlay2: #8f97b7;
-	--ctp-macchiato-overlay1: #7d84a2;
-	--ctp-macchiato-overlay0: #6c728d;
-	--ctp-macchiato-surface2: #5a5f78;
-	--ctp-macchiato-surface1: #484c64;
-	--ctp-macchiato-surface0: #363a4f;
-	--ctp-macchiato-base: #24273a;
-	--ctp-macchiato-mantle: #1e2030;
-	--ctp-macchiato-crust: #181926;
-	--font-face: "Noto Sans", Arial, Helvetica, sans-serif;
-	--font-mono: "Roboto Mono", Courier, monospace;
-	--font-size: 13px;
-	--icon-size: 16px;
-
-	--regular: 400;
-	--bolder: 600;
-
-	--scroll-radius: 3px;
-
-	--opacity-0-8: 0.8;
+  --font-face: "Noto Sans", Arial, Helvetica, sans-serif;
+  --font-mono: "Roboto Mono", Courier, monospace;
+  --font-size: 13px;
+  --icon-size: 16px;
+
+  --regular: 400;
+  --bolder: 600;
+
+  --scroll-radius: 3px;
+
+  --opacity-0-8: 0.8;
 }
 
 /* Font used by Joplin */
 * {
-	font-family: var(--font-face) !important;
+  font-family: var(--font-face) !important;
 }
 
 html, body {
-	background-color: var(--ctp-macchiato-base) !important;
-	font-size: var(--font-size) !important;
-	font-weight: var(--regular) !important;
-	color: var(--light) !important;
+  background-color: #24273A !important;
+  font-size: var(--font-size) !important;
+  font-weight: var(--regular) !important;
+  color: var(--light) !important;
 }
 .CodeMirror-selected {
-		/* background-color: var(--lighter-grey) !important; */
-		background: #6B6B6B !important;
+    /* background-color: var(--lighter-grey) !important; */
+    background: #6B6B6B !important;
 }
 .rli-root {
-	background-color: var(--ctp-macchiato-base) !important;
+  background-color: #24273A !important;
 }
 
 /* Icons */
 .fa, .far, .fas {
-	font-weight: 900 !important;
-	font-family: "Font Awesome 5 Free" !important;
-	font-size: var(--icon-size) !important;
+  font-weight: 900 !important;
+  font-family: "Font Awesome 5 Free" !important;
+  font-size: var(--icon-size) !important;
 }
 
 ::placeholder {
-	color: var(--ctp-macchiato-lavender) !important;
+  color: #B7BDF8 !important;
 }
 
 /* Scrollbars */
 ::-webkit-scrollbar-thumb {
-	background-color: var(--ctp-macchiato-surface0) !important;
-	border-radius: var(--scroll-radius) !important;
+  background-color: #363A4F !important;
+  border-radius: var(--scroll-radius) !important;
 }
 
 /*********************************************************************************
@@ -83,7 +57,7 @@ html, body {
 
 /* General panel style */
 .resizableLayoutItem > div {
-	background-color: var(--ctp-macchiato-base) !important;
+  background-color: #24273A !important;
 }
 
 /*********************************************************************************
@@ -91,101 +65,101 @@ html, body {
 *********************************************************************************/
 
 .sidebar {
-	background-color: var(--ctp-macchiato-crust) !important;
-	text-transform: uppercase;
-	font-weight: var(--bolder);
+  background-color: #181926 !important;
+  text-transform: uppercase;
+  font-weight: var(--bolder);
 }
 
 /* Hide "All notes" icon
  * Comment this next block if you want the "All notes" icon */
 i.icon-notes {
-	display: none !important;
+  display: none !important;
 }
 
 /* FOLDERS */
 
 /* "Add new notebook" button */
 .sidebar > div > div > button span {
-	color: var(--ctp-macchiato-lavender) !important;
+  color: #B7BDF8 !important;
 }
 
 .sidebar > div > div > button:hover {
-	opacity: var(--opacity-0-8);
+  opacity: var(--opacity-0-8);
 }
 .folders .list-item-container {
-		background-color: var(--ctp-macchiato-crust) !important;
+    background-color: #181926 !important;
 }
 .folders .list-item-container:hover {
-	background-color: var(--ctp-macchiato-overlay0) !important;
+  background-color: #6E738D !important;
 }
 
 .folders .list-item-container a {
-	text-transform: initial;
-	color: var(--ctp-macchiato-text) !important;
-	font-weight: var(--regular);
+  text-transform: initial;
+  color: #CAD3F5 !important;
+  font-weight: var(--regular);
 }
 
 .folders .list-item-container a:focus {
-	color: var(--ctp-macchiato-text) !important;
-	background-color: var(--ctp-macchiato-base) !important;
+  color: #CAD3F5 !important;
+  background-color: #24273A !important;
 }
 
 .folders .list-item-container a:hover {
-	color: var(--ctp-macchiato-text) !important;
+  color: #CAD3F5 !important;
 }
 
 /* TAGS */
 .tags .list-item-container {
-		display: inline-block;
-		line-height: 0 !important;
-		padding: 0 !important;
-		height: auto !important;
-		background-color: var(--ctp-macchiato-crust) !important;
+    display: inline-block;
+    line-height: 0 !important;
+    padding: 0 !important;
+    height: auto !important;
+    background-color: #181926 !important;
 }
 .tags .list-item-container:hover {
-	display: inline-block;
-	line-height: 0 !important;
-	padding: 0 !important;
-	height: auto !important;
-	background-color: var(--ctp-macchiato-overlay0) !important;
+  display: inline-block;
+  line-height: 0 !important;
+  padding: 0 !important;
+  height: auto !important;
+  background-color: #6E738D !important;
 }
 
 .tags .list-item-container a {
-	padding-left: 12px !important;
-	text-transform: initial;
-	color: var(--ctp-macchiato-text) !important;
-	font-weight: var(--regular);
+  padding-left: 12px !important;
+  text-transform: initial;
+  color: #CAD3F5 !important;
+  font-weight: var(--regular);
 }
 
 .tags .list-item-container a:focus {
-	color: var(--ctp-macchiato-text) !important;
-	background-color: var(--ctp-macchiato-base) !important;
+  color: #CAD3F5 !important;
+  background-color: #24273A !important;
 }
 
 .tags .list-item-container a:hover {
-	color: var(--ctp-macchiato-text) !important;
-	background-color: var(--ctp-macchiato-overlay0) !important;
+  color: #CAD3F5 !important;
+  background-color: #6E738D !important;
 }
 
 /* SYNCHRONIZATION */
 
 .sidebar > div:last-of-type {
-	background-color: none !important;
+  background-color: none !important;
 }
 
 .sidebar > div:last-of-type > button {
-	background-color: var(--ctp-macchiato-lavender) !important;
-	border: 0px !important;
-	text-transform: uppercase;
-	font-size: var(--font-size) !important;
+  background-color: #B7BDF8 !important;
+  border: 0px !important;
+  text-transform: uppercase;
+  font-size: var(--font-size) !important;
 }
 
 .sidebar > div:last-of-type > button:hover {
-	opacity: var(--opacity-0-8);
+  opacity: var(--opacity-0-8);
 }
 
 .sidebar > div:last-of-type > button > span {
-	color: var(--ctp-macchiato-crust) !important;
+  color: #181926 !important;
 }
 
 /*********************************************************************************
@@ -193,111 +167,111 @@ i.icon-notes {
 *********************************************************************************/
 
 .note-list {
-	background-color: var(--ctp-macchiato-mantle) !important;
-	border: none !important;
+  background-color: #1E2030 !important;
+  border: none !important;
 }
 
 /* Empty notelist */
 .cLdGCO, .cLdGCO > div {
-	background-color: var(--ctp-macchiato-mantle) !important;
+  background-color: #1E2030 !important;
 }
 
 /* Remove border - introduced in 1.3.7 */
 .rli-noteList div {
-	border: none !important;
+  border: none !important;
 }
 
 /* BUTTONS SEARCH, SORT NOTES, NEW NOTE AND NEW TASK */
 
 div[height="50"] {
-	background-color: var(--ctp-macchiato-mantle) !important;
+  background-color: #1E2030 !important;
 }
 
 div[height="50"] input {
-	border: none !important;
-	color: var(--ctp-macchiato-text) !important;
-	background-color: var(--ctp-macchiato-mantle) !important;
+  border: none !important;
+  color: #CAD3F5 !important;
+  background-color: #1E2030 !important;
 }
 
 div[height="50"] button {
-	background: transparent !important;
-	color: var(--ctp-macchiato-text) !important;
-	border: 0 !important;
+  background: transparent !important;
+  color: #CAD3F5 !important;
+  border: 0 !important;
 }
 
 div[height="50"] button:hover {
-	opacity: var(--opacity-0-8);
+  opacity: var(--opacity-0-8);
 }
 
 div[height="50"] button span {
-	color: var(--ctp-macchiato-text) !important;
+  color: #CAD3F5 !important;
 }
 
-.sc-hCPjZK.fJjcQe {
-	background-color: var(--ctp-macchiato-mantle) !important;
+.sc-hCPjZK.fJjcQe{
+  background-color: #1E2030 !important;
 }
 .new-note-todo-buttons > button {
-	background-color: var(--ctp-macchiato-lavender) !important;
-	border: none !important;
+  background-color: #B7BDF8 !important;
+  border: none !important;
 }
 .new-todo-button > span {
-	color: var(--ctp-macchiato-crust) !important;
+  color: #181926 !important;
 }
 
 .search-bar {
-	background-color: var(--ctp-macchiato-crust) !important;
+  background-color: #181926 !important;
 }
 
 .icon-search {
-	color: var(--ctp-macchiato-lavender) !important;
+  color: #B7BDF8 !important;
 }
 
 .sort-order-reverse-button {
-	background-color: var(--ctp-macchiato-crust) !important;
+  background-color: #181926 !important;
 }
 .sort-order-reverse-button {
-	background-color: var(--ctp-macchiato-crust) !important;
+  background-color: #181926 !important;
 }
 
 .fa-calendar-alt {
-	color: var(--ctp-macchiato-lavender) !important;
+  color: #B7BDF8 !important;
 }
 .fa-long-arrow-alt-up {
-	color: var(--ctp-macchiato-lavender) !important;
+  color: #B7BDF8 !important;
 }
 /* LIST OF NOTES */
 
 .note-list .list-item-container {
-	background-color: var(--ctp-macchiato-mantle) !important;
+  background-color: #1E2030 !important;
 }
 
 .note-list .list-item-container:hover {
-	background-color: var(--ctp-macchiato-overlay1) !important;
+  background-color: #8087A2 !important;
 }
 
 .item-list.note-list .list-item-container::before {
-	border: none !important;
+  border: none !important;
 }
 
 .note-list .list-item-container a {
-	text-transform: initial;
-	color: var(--ctp-macchiato-text) !important;
-	font-weight: var(--regular);
+  text-transform: initial;
+  color: #CAD3F5 !important;
+  font-weight: var(--regular);
 }
 
 .note-list .list-item-container a:focus {
-	color: var(--ctp-macchiato-text) !important;
-	background-color: var(--ctp-macchiato-base) !important;
+  color: #CAD3F5 !important;
+  background-color: #24273A !important;
 }
 
 .note-list .list-item-container a:hover {
-	color: var(--ctp-macchiato-text) !important;
+  color: #CAD3F5 !important;
 }
 
 /* Add "..." to notes with long titles */
 .item-list.note-list .list-item-container > a > span {
-	overflow: hidden;
-	text-overflow: ellipsis;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /*********************************************************************************
@@ -309,21 +283,21 @@ div[height="50"] button span {
 /* Title */
 /* Changes frequently with updates, need to keep tabs */
 .rli-editor .cCOtNv > input {
-	padding-top: 5px;
-	background-color: var(--ctp-macchiato-base) !important;
+  padding-top: 5px;
+  background-color: #24273A !important;
 }
 
 .title-input {
-  background-color: var(--ctp-macchiato-base) !important;
-  color: var(--ctp-macchiato-text) !important;
+  background-color: #24273A !important;
+  color: #CAD3F5 !important;
 }
 
 .editor-toolbar {
-	background-color: transparent !important;
+  background-color: transparent !important;
 }
 
 .editor-toolbar > div > a:hover {
-	opacity: var(--opacity-0-8);
+  opacity: var(--opacity-0-8);
 }
 
 /* Hide "Spell checker" button */
@@ -338,63 +312,64 @@ div[height="50"] button span {
 
 /* Hide the Toggle editors button */
 .editor-toolbar button[title="Toggle editors"] {
-	display: none !important;
+  display: none !important;
 }
 
 /* Breadcrumbs (In:...) - Used in tag listings */
 .cJOYJm {
-	background-color: var(--ctp-macchiato-lavender) !important;
-	margin: 0px !important;
-	padding: 5px !important;
-	font-size: var(--font-size) !important;
+  background-color: #B7BDF8 !important;
+  margin: 0px !important;
+  padding: 5px !important;
+  font-size: var(--font-size) !important;
 }
 
 .cJOYJm:hover {
-	opacity: var(--opacity-0-8);
+  opacity: var(--opacity-0-8);
 }
 
 /* CONTENT */
 /* Empty notebook */
 .rli-editor > div > div:empty {
-	background-color: var(--ctp-macchiato-base) !important;
+  background-color: #24273A !important;
 }
 
 /* Editor layout splitter */
 .rli-editor > div > div > div > div > div > div > div:last-of-type {
-	border-color: var(--ctp-macchiato-base) !important;
+  border-color: #24273A !important;
 }
+
 div.sc-AxirZ.hagDvo, div.sc-AxirZ.hagDvo > div {
-	background-color: var(--ctp-macchiato-mantle) !important;
-	color: var(--ctp-macchiato-text) !important;
+  background-color: #1E2030 !important;
+  color: #CAD3F5 !important;
 }
 
 /* NOTE SEARCH BAR */
 .note-search-bar, .note-search-bar > div > div {
-	background-color: var(--ctp-macchiato-base) !important;
-	width: 100%;
-	border: 0 !important;
+  background-color: #24273A !important;
+  width: 100%;
+  border: 0 !important;
 }
 
 .note-search-bar input {
-	border: 0 !important;
-	padding: 5px;
-	color: var(--ctp-macchiato-text) !important;
-	background-color: var(--ctp-macchiato-base) !important;
+  border: 0 !important;
+  padding: 5px;
+  color: #CAD3F5 !important;
+  background-color: #24273A !important;
 }
 
 /* TAGS */
 .tag-bar {
-	background-color: transparent !important;
+  background-color: transparent !important;
 }
 
 .tag-list > span {
-	color: var(--ctp-macchiato-lavender) !important;
-	background-color: var(--ctp-macchiato-crust) !important;
+  color: #B7BDF8 !important;
+  background-color: #181926 !important;
 }
 
 /* Hide "Click to add tags..."*/
 a[Title="Tags"] + div > span {
-	display: none !important;
+  display: none !important;
 }
 
 /*********************************************************************************
@@ -402,128 +377,128 @@ a[Title="Tags"] + div > span {
 *********************************************************************************/
 
 .cm-s-material-darker.CodeMirror {
-	background-color: var(--ctp-macchiato-base) !important;
-	color: var(--ctp-macchiato-text) !important;
+  background-color: #24273A !important;
+  color: #CAD3F5 !important;
 }
 
 /* Header */
 .cm-header {
-	color: var(--ctp-macchiato-lavender) !important;
+  color: #B7BDF8 !important;
 }
 
 /* Italics/Emphasis, Bold, BoldItalics */
 .cm-em, .cm-strong, .cm-strong.cm-em {
-	color: var(--ctp-macchiato-text) !important;
+  color: #CAD3F5 !important;
 }
 
 /* Lists (Bullet/number/todo) */
 .cm-variable-2, .cm-variable-3, .cm-keyword {
-	color: var(--ctp-macchiato-text) !important;
+  color: #CAD3F5 !important;
 }
 
 .cm-s-material-darker .cm-variable-2.cm-rm-list-token {
-	color: var(--ctp-macchiato-text) !important;
+  color: #CAD3F5 !important;
 }
 
 /* Links (link) */
 .cm-url {
-	color: var(--ctp-macchiato-rosewater) !important;
-	opacity: 1;
-	text-decoration: underline;
+  color: #F4DBD6 !important;
+  opacity: 1;
+  text-decoration: underline;
 }
 
 /* Links (text) */
 .cm-link-text {
-	color: var(--ctp-macchiato-rosewater) !important;
+  color: #F4DBD6 !important;
 }
 pre.CodeMirror-line {
-		color: var(--ctp-macchiato-text) !important;
-		background-color: none !important;
+    color: #CAD3F5 !important;
+    background-color: none !important;
 }
 /* Image link in editor */
 span.cm-string.cm-url.cm-overlay.cm-rm-link.cm-overlay.cm-rm-image {
-	color: var(--ctp-macchiato-lavender) !important;
+  color: #B7BDF8 !important;
 }
 /* Comment outside code block */
 pre.CodeMirror-line span.cm-comment {
-	color: var(--ctp-macchiato-overlay1) !important;
-	background-color: none !important;
-	border: 0 !important;
+  color: #8087A2 !important;
+  background-color: none !important;
+  border: 0 !important;
 }
 
 /* Codeblock selection colour */
 /* For some reason, the CodeMirror selection does not pick the colour correctly, left for now. */
 pre.CodeMirror-line span.CodeMirror-selectedtext {
-	/* background: var(--ctp-macchiato-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #5B6078 !important; */
+  background: #6B6B6B !important;
 }
 
 div[class^="cm-jn-code-block-background "]::selection {
-	background-color: var(--ctp-macchiato-base) !important;
-	border-color: var(--ctp-macchiato-base) !important;
+  background-color: #24273A !important;
+  border-color: #24273A !important;
 }
 
 pre.cm-jn-code-block.CodeMirror-line span.cm-comment.cm-jn-monospace.CodeMirror-selectedtext {
-	/* background: var(--ctp-macchiato-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #5B6078 !important; */
+  background: #6B6B6B !important;
 }
 pre.cm-jn-code-block.CodeMirror-line::selection {
-	/* background: var(--ctp-macchiato-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #5B6078 !important; */
+  background: #6B6B6B !important;
 }
 div.cm-jn-code-block-background.CodeMirror-linebackground::selection {
-	/* background: var(--ctp-macchiato-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #5B6078 !important; */
+  background: #6B6B6B !important;
 }
 pre.cm-jn-code-block.CodeMirror-line::selection span {
-	/* background: var(--ctp-macchiato-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #5B6078 !important; */
+  background: #6B6B6B !important;
 }
 
 div.CodeMirror span.cm-comment.cm-jn-inline-code {
-	background-color: transparent !important;
-	padding-right: 0 !important;
-	padding-left: 0 !important;
+  background-color: transparent !important;
+  padding-right: 0 !important;
+  padding-left: 0 !important;
 }
 
 /* Code Block Text */
 div.CodeMirror span.cm-comment:not(.cm-jn-inline-code) {
-	color: var(--ctp-macchiato-text) !important;
-	background-color: transparent !important;
+  color: #CAD3F5 !important;
+  background-color: transparent !important;
 }
 
 /* Code block background */
 div.CodeMirror div.cm-jn-code-block-background {
-		background-color: var(--ctp-macchiato-mantle) !important;
+    background-color: #1E2030 !important;
 }
 
 /* Horizontal Line */
 .cm-hr {
-	color: var(--ctp-macchiato-overlay0) !important;
+  color: #6E738D !important;
 }
 
 /* Cursor colour */
 .CodeMirror-cursor {
-		border-left: 1px solid var(--ctp-macchiato-rosewater) !important;
-		border-right: none !important;
-		width: 0 !important;
+    border-left: 1px solid #F4DBD6 !important;
+    border-right: none !important;
+    width: 0 !important;
 }
 .cm-fat-cursor div.CodeMirror-cursor {
-		width: 10px !important;
-		border: 0 !important;
-		background: var(--ctp-macchiato-rosewater) !important;
+    width: 10px !important;
+    border: 0 !important;
+    background: #F4DBD6 !important;
 }
 .cm-fat-cursor div.CodeMirror-cursors {
-		z-index: 1 !important;
+    z-index: 1 !important;
 }
 .cm-fat-cursor-mark {
-		background-color: rgba(150, 205, 251, 0.5) !important;
+    background-color: rgba(125, 196, 228, 0.50) !important;
 }
 
 .cm-animate-fat-cursor {
-		width: auto !important;
-		border: 0;
-		background-color: var(--ctp-macchiato-rosewater) !important;
+    width: auto !important;
+    border: 0;
+    background-color: #F4DBD6 !important;
 }
 
 /* Rich Markdown Extra CSS Classes
@@ -531,42 +506,42 @@ Please opt in "Add additional CSS classes for enhanced customization" in plugin
 settings, see https://github.com/CalebJohn/joplin-rich-markdown#extra-css */
 
 .cm-header.cm-rm-header-token {
-	color: var(--ctp-macchiato-green) !important;
+  color: #A6DA95 !important;
 }
 
 .cm-strong.cm-rm-strong-token {
-	color: var(--ctp-macchiato-blue) !important;
+  color: #8AADF4 !important;
 }
 
 pre.cm-rm-blockquote.CodeMirror-line {
-	font-style: italic !important;
+  font-style: italic !important;
 }
 
 /* Command palette coloring */
 
 div.modal-dialog {
-	background-color: var(--ctp-macchiato-mantle) !important;
+  background-color: #1E2030 !important;
 }
 
 .modal-dialog > div > input {
-	background-color: var(--ctp-macchiato-crust) !important;
-	color: var(--ctp-macchiato-text) !important;
+  background-color: #181926 !important;
+  color: #CAD3F5 !important;
 }
 
 .modal-dialog > .item-list {
-	background-color: var(--ctp-macchiato-crust) !important;
-	color: var(--ctp-macchiato-text) !important;
+  background-color: #181926 !important;
+  color: #CAD3F5 !important;
 
 }
 
 .modal-dialog > .item-list div[class="selected"] {
-	background-color: var(--ctp-macchiato-surface2) !important;
+  background-color: #5B6078 !important;
 }
 
 .modal-dialog > .item-list div[class="selected"] > div {
-	color: var(--ctp-macchiato-text) !important;
+  color: #CAD3F5 !important;
 }
 
 .modal-dialog > .item-list > * {
-	color: var(--ctp-macchiato-text) !important;
+  color: #CAD3F5 !important;
 }
diff --git a/src/macchiato/userstyle.css b/src/macchiato/userstyle.css
index 0fa7ff4..8438e3e 100644
--- a/src/macchiato/userstyle.css
+++ b/src/macchiato/userstyle.css
@@ -1,39 +1,12 @@
 /* Style for rendered Markdown */
-
 :root {
-  --ctp-macchiato-rosewater: #f4dbd6;
-	--ctp-macchiato-flamingo: #f0c6c6;
-	--ctp-macchiato-pink: #f5bde6;
-	--ctp-macchiato-mauve: #c6a0f6;
-	--ctp-macchiato-red: #ed8796;
-	--ctp-macchiato-maroon: #ee99a0;
-	--ctp-macchiato-peach: #f5a97f;
-	--ctp-macchiato-yellow: #eed49f;
-  	--ctp-macchiato-green: #a6da95;
-	--ctp-macchiato-teal: #8bd5ca;
-	--ctp-macchiato-sky: #91d7e3;
-	--ctp-macchiato-sapphire: #7dc4e4;
-	--ctp-macchiato-blue: #8aadf4;
-	--ctp-macchiato-lavender: #b7bdf8;
-	--ctp-macchiato-text: #c5cff5;
-	--ctp-macchiato-subtext1: #b3bce0;
-  	--ctp-macchiato-subtext0: #a1aacb;
-	--ctp-macchiato-overlay2: #8f97b7;
-	--ctp-macchiato-overlay1: #7d84a2;
-	--ctp-macchiato-overlay0: #6c728d;
-	--ctp-macchiato-surface2: #5a5f78;
-	--ctp-macchiato-surface1: #484c64;
-	--ctp-macchiato-surface0: #363a4f;
-	--ctp-macchiato-base: #24273a;
-	--ctp-macchiato-mantle: #1e2030;
-	--ctp-macchiato-crust: #181926;
   --white: #D9E0EE;
   --black: #000000;
   --light: #C9CFFF;
   --lighter-grey: #C3BAC6;
   --light-grey: #988BA2;
 
-	--font-face: "Noto Sans", Arial, Helvetica, sans-serif;
+  --font-face: "Noto Sans", Arial, Helvetica, sans-serif;
   --font-mono: "Roboto Mono", Courier, monospace;
   --font-size: 13px;
   --icon-size: 16px;
@@ -47,27 +20,27 @@
 }
 
 #rendered-md, body, th, td {
-  background-color: var(--ctp-macchiato-base) !important;
+  background-color: #24273A !important;
   font-family: var(--font-face) !important;
 }
 
 p, ul, ol, li {
-  color: var(--ctp-macchiato-text) !important;
+  color: #CAD3F5 !important;
 }
 
 strong {
-  color: var(--ctp-macchiato-text) !important;
+  color: #CAD3F5 !important;
 }
 
 hr {
   border: none;
-  border-bottom: 1px solid var(--ctp-macchiato-base) !important;
+  border-bottom: 1px solid #24273A !important;
   margin: 2.5em 0 !important;
 }
 
 /* Scrollbars */
 ::-webkit-scrollbar-thumb {
-  background-color: var(--ctp-macchiato-base) !important;
+  background-color: #24273A !important;
   border-radius: var(--scroll-radius) !important;
 }
 
@@ -76,7 +49,7 @@ hr {
 *********************************************************************************/
 
 h1 {
-  border-bottom: 1px solid var(--ctp-macchiato-base) !important;
+  border-bottom: 1px solid #24273A !important;
   font-weight: var(--bolder) !important;
 }
 
@@ -90,7 +63,7 @@ h2, h3, h4, h5, h6 {
 *********************************************************************************/
 
 a {
-  color: var(--ctp-macchiato-rosewater) !important;
+  color: #F4DBD6 !important;
   text-decoration: underline !important;
 }
 
@@ -100,7 +73,7 @@ a:hover {
 
 /* Joplin icon in Joplin link */
 .resource-icon {
-  background-color: var(--ctp-macchiato-rosewater) !important;
+  background-color: #F4DBD6 !important;
 }
 
 /*********************************************************************************
@@ -108,10 +81,10 @@ a:hover {
 *********************************************************************************/
 
 pre, .hljs {
-  background-color: var(--ctp-macchiato-mantle) !important;
+  background-color: #1E2030 !important;
   font-family: var(--font-mono) !important;
   padding: 10px !important;
-  color: var(--ctp-macchiato-text) !important;
+  color: #CAD3F5 !important;
   font-size: 14px !important;
   overflow: scroll !important;
 }
@@ -121,7 +94,7 @@ pre, .hljs {
   background-color: transparent !important;
   border: 0 !important;
   font-family: var(--font-mono) !important;
-  color: var(--ctp-macchiato-yellow) !important;
+  color: #EED49F !important;
   font-size: 14px !important;
 }
 
@@ -130,13 +103,13 @@ pre, .hljs {
 *********************************************************************************/
 
 blockquote {
-  background-color: var(--ctp-macchiato-surface0) !important;
+  background-color: #363A4F !important;
   padding: 10px !important;
   color: var(--light) !important;
   font-size: 14px !important;
   font-style: italic !important;
   border: 0 !important;
-  border-left: 5px solid var(--ctp-macchiato-mantle) !important;
+  border-left: 5px solid #1E2030 !important;
 }
 
 /*********************************************************************************
@@ -144,15 +117,15 @@ blockquote {
 *********************************************************************************/
 
 th {
-  border: 1px solid var(--ctp-macchiato-text) !important;
-  color: var(--ctp-macchiato-text) !important;
-  border-bottom: 1px solid var(--ctp-macchiato-text) !important;
+  border: 1px solid #CAD3F5 !important;
+  color: #CAD3F5 !important;
+  border-bottom: 1px solid #CAD3F5 !important;
 }
 
 td {
-  border: 1px solid var(--ctp-macchiato-text) !important;
-  color: var(--ctp-macchiato-text) !important;
-  border-bottom: 1px solid var(--ctp-macchiato-text) !important;
+  border: 1px solid #CAD3F5 !important;
+  color: #CAD3F5 !important;
+  border-bottom: 1px solid #CAD3F5 !important;
 }
 
 /*********************************************************************************
@@ -160,18 +133,18 @@ td {
 *********************************************************************************/
 
 ::selection {
-	background-color: var(--ctp-macchiato-lavender) !important;
-  color: var(--ctp-macchiato-crust) !important;
+  background-color: #B7BDF8 !important;
+  color: #181926 !important;
 }
 
 mark, mark strong {
-  background: var(--ctp-macchiato-yellow) !important;
-  color: var(--ctp-macchiato-crust) !important;
+  background: #EED49F !important;
+  color: #181926 !important;
 }
 
 /* Highlighted searched item */
 mark[data-markjs] {
-  background-color: var(--ctp-macchiato-lavender) !important;
+  background-color: #B7BDF8 !important;
 }
 
 /*********************************************************************************
@@ -189,8 +162,8 @@ mark[data-markjs] {
 /* Container for spoiler title */
 #spoiler-block-title {
   font-family: var(--font-face) !important;
-  color: var(--ctp-macchiato-text) !important;
-  background-color: var(--ctp-macchiato-mantle) !important;
+  color: #CAD3F5 !important;
+  background-color: #1E2030 !important;
   border-radius: 0px;
 }
 
@@ -198,17 +171,17 @@ mark[data-markjs] {
 #spoiler-block-body {
   font-family: var(--font-face) !important;
   color: var(--light) !important;
-  background-color: var(--ctp-macchiato-mantle) !important;
+  background-color: #1E2030 !important;
   border-radius: 0px;
 }
 
 /* Styling of the spoiler block body */
 .summary-content {
-  background-color: var(--ctp-macchiato-mantle) !important;
+  background-color: #1E2030 !important;
 }
 
 .summary-title:before {
-  color: var(--ctp-macchiato-lavender) !important;
+  color: #B7BDF8 !important;
 }
 
 /*********************************************************************************
@@ -230,8 +203,7 @@ mark[data-markjs] {
   strong {
     color: var(--black) !important;
   }
-
- th {
+  th {
   border: 1px solid var(--black) !important;
   color: var(--black) !important;
   border-bottom: 1px solid var(--black) !important;
@@ -260,7 +232,7 @@ mark[data-markjs] {
   }
 
   a {
-    color: var(--ctp-macchiato-red) !important;
+    color: #ED8796 !important;
     text-decoration: underline !important;
   }
 
@@ -269,7 +241,7 @@ mark[data-markjs] {
   background-color: #F8F8F8 !important;
   border: 0 !important;
   font-family: var(--font-mono) !important;
-  /* color: var(--ctp-macchiato-yellow) !important; */
+  /* color: #EED49F !important; */
   font-size: 14px !important;
 }
 
@@ -277,7 +249,7 @@ pre, .hljs {
   background-color: #F8F8F8 !important;
   font-family: var(--font-mono) !important;
   padding: 10px !important;
-  color: var(--ctp-macchiato-crust) !important;
+  color: #181926 !important;
   font-size: 14px !important;
   overflow: scroll !important;
 }
@@ -285,7 +257,7 @@ pre, .hljs {
 blockquote {
   background-color: #F8F8F8 !important;
   padding: 10px !important;
-  color: var(--ctp-macchiato-crust) !important;
+  color: #181926 !important;
   font-size: 14px !important;
   font-style: italic !important;
   border: 0 !important;
diff --git a/src/mocha/userchrome.css b/src/mocha/userchrome.css
index 3a96534..2660bc1 100644
--- a/src/mocha/userchrome.css
+++ b/src/mocha/userchrome.css
@@ -2,43 +2,17 @@
 /* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */
 
 :root {
-	--ctp-mocha-rosewater: #f5e0dc;
-	--ctp-mocha-flamingo: #f2cdcd;
-	--ctp-mocha-pink: #f5c2e7;
-	--ctp-mocha-mauve: #cba6f7;
-	--ctp-mocha-red: #f38ba8;
-	--ctp-mocha-maroon: #eba0ac;
-	--ctp-mocha-peach: #fab387;
-	--ctp-mocha-yellow: #f9e2af;
-	--ctp-mocha-green: #a6e3a1;
-	--ctp-mocha-teal: #94e2d5;
-	--ctp-mocha-sky: #89dceb;
-	--ctp-mocha-sapphire: #74c7ec;
-	--ctp-mocha-blue: #87b0f9;
-	--ctp-mocha-lavender: #b4befe;
-	--ctp-mocha-text: #c6d0f5;
-	--ctp-mocha-subtext1: #b3bcdf;
-	--ctp-mocha-subtext0: #a1a8c9;
-	--ctp-mocha-overlay2: #8e95b3;
-	--ctp-mocha-overlay1: #7b819d;
-	--ctp-mocha-overlay0: #696d86;
-	--ctp-mocha-surface2: #565970;
-	--ctp-mocha-surface1: #43465a;
-	--ctp-mocha-surface0: #313244;
-	--ctp-mocha-base: #1e1e2e;
-	--ctp-mocha-mantle: #181825;
-	--ctp-mocha-crust: #11111b;
-	--font-face: "Noto Sans", Arial, Helvetica, sans-serif;
-	--font-mono: "Roboto Mono", Courier, monospace;
-	--font-size: 13px;
-	--icon-size: 16px;
-
-	--regular: 400;
-	--bolder: 600;
-
-	--scroll-radius: 3px;
-
-	--opacity-0-8: 0.8;
+  --font-face: "Noto Sans", Arial, Helvetica, sans-serif;
+  --font-mono: "Roboto Mono", Courier, monospace;
+  --font-size: 13px;
+  --icon-size: 16px;
+
+  --regular: 400;
+  --bolder: 600;
+
+  --scroll-radius: 3px;
+
+  --opacity-0-8: 0.8;
 }
 
 /* Font used by Joplin */
@@ -47,7 +21,7 @@
 }
 
 html, body {
-  background-color: var(--ctp-mocha-base) !important;
+  background-color: #1E1E2E !important;
   font-size: var(--font-size) !important;
   font-weight: var(--regular) !important;
   color: var(--light) !important;
@@ -57,7 +31,7 @@ html, body {
     background: #6B6B6B !important;
 }
 .rli-root {
-  background-color: var(--ctp-mocha-base) !important;
+  background-color: #1E1E2E !important;
 }
 
 /* Icons */
@@ -68,12 +42,12 @@ html, body {
 }
 
 ::placeholder {
-  color: var(--ctp-mocha-lavender) !important;
+  color: #B4BEFE !important;
 }
 
 /* Scrollbars */
 ::-webkit-scrollbar-thumb {
-  background-color: var(--ctp-mocha-surface0) !important;
+  background-color: #313244 !important;
   border-radius: var(--scroll-radius) !important;
 }
 
@@ -83,7 +57,7 @@ html, body {
 
 /* General panel style */
 .resizableLayoutItem > div {
-  background-color: var(--ctp-mocha-base) !important;
+  background-color: #1E1E2E !important;
 }
 
 /*********************************************************************************
@@ -91,7 +65,7 @@ html, body {
 *********************************************************************************/
 
 .sidebar {
-  background-color: var(--ctp-mocha-crust) !important;
+  background-color: #11111B !important;
   text-transform: uppercase;
   font-weight: var(--bolder);
 }
@@ -106,32 +80,32 @@ i.icon-notes {
 
 /* "Add new notebook" button */
 .sidebar > div > div > button span {
-  color: var(--ctp-mocha-lavender) !important;
+  color: #B4BEFE !important;
 }
 
 .sidebar > div > div > button:hover {
   opacity: var(--opacity-0-8);
 }
 .folders .list-item-container {
-    background-color: var(--ctp-mocha-crust) !important;
+    background-color: #11111B !important;
 }
 .folders .list-item-container:hover {
-  background-color: var(--ctp-mocha-overlay0) !important;
+  background-color: #6C7086 !important;
 }
 
 .folders .list-item-container a {
   text-transform: initial;
-  color: var(--ctp-mocha-text) !important;
+  color: #CDD6F4 !important;
   font-weight: var(--regular);
 }
 
 .folders .list-item-container a:focus {
-  color: var(--ctp-mocha-text) !important;
-  background-color: var(--ctp-mocha-base) !important;
+  color: #CDD6F4 !important;
+  background-color: #1E1E2E !important;
 }
 
 .folders .list-item-container a:hover {
-  color: var(--ctp-mocha-text) !important;
+  color: #CDD6F4 !important;
 }
 
 /* TAGS */
@@ -140,31 +114,31 @@ i.icon-notes {
     line-height: 0 !important;
     padding: 0 !important;
     height: auto !important;
-    background-color: var(--ctp-mocha-crust) !important;
+    background-color: #11111B !important;
 }
 .tags .list-item-container:hover {
   display: inline-block;
   line-height: 0 !important;
   padding: 0 !important;
   height: auto !important;
-  background-color: var(--ctp-mocha-overlay0) !important;
+  background-color: #6C7086 !important;
 }
 
 .tags .list-item-container a {
   padding-left: 12px !important;
   text-transform: initial;
-  color: var(--ctp-mocha-text) !important;
+  color: #CDD6F4 !important;
   font-weight: var(--regular);
 }
 
 .tags .list-item-container a:focus {
-  color: var(--ctp-mocha-text) !important;
-  background-color: var(--ctp-mocha-base) !important;
+  color: #CDD6F4 !important;
+  background-color: #1E1E2E !important;
 }
 
 .tags .list-item-container a:hover {
-  color: var(--ctp-mocha-text) !important;
-  background-color: var(--ctp-mocha-overlay0) !important;
+  color: #CDD6F4 !important;
+  background-color: #6C7086 !important;
 }
 
 /* SYNCHRONIZATION */
@@ -174,7 +148,7 @@ i.icon-notes {
 }
 
 .sidebar > div:last-of-type > button {
-  background-color: var(--ctp-mocha-lavender) !important;
+  background-color: #B4BEFE !important;
   border: 0px !important;
   text-transform: uppercase;
   font-size: var(--font-size) !important;
@@ -185,7 +159,7 @@ i.icon-notes {
 }
 
 .sidebar > div:last-of-type > button > span {
-  color: var(--ctp-mocha-crust) !important;
+  color: #11111B !important;
 }
 
 /*********************************************************************************
@@ -193,13 +167,13 @@ i.icon-notes {
 *********************************************************************************/
 
 .note-list {
-  background-color: var(--ctp-mocha-mantle) !important;
+  background-color: #181825 !important;
   border: none !important;
 }
 
 /* Empty notelist */
 .cLdGCO, .cLdGCO > div {
-  background-color: var(--ctp-mocha-mantle) !important;
+  background-color: #181825 !important;
 }
 
 /* Remove border - introduced in 1.3.7 */
@@ -210,18 +184,18 @@ i.icon-notes {
 /* BUTTONS SEARCH, SORT NOTES, NEW NOTE AND NEW TASK */
 
 div[height="50"] {
-  background-color: var(--ctp-mocha-mantle) !important;
+  background-color: #181825 !important;
 }
 
 div[height="50"] input {
   border: none !important;
-  color: var(--ctp-mocha-text) !important;
-  background-color: var(--ctp-mocha-mantle) !important;
+  color: #CDD6F4 !important;
+  background-color: #181825 !important;
 }
 
 div[height="50"] button {
   background: transparent !important;
-  color: var(--ctp-mocha-text) !important;
+  color: #CDD6F4 !important;
   border: 0 !important;
 }
 
@@ -230,49 +204,49 @@ div[height="50"] button:hover {
 }
 
 div[height="50"] button span {
-  color: var(--ctp-mocha-text) !important;
+  color: #CDD6F4 !important;
 }
 
-.sc-hCPjZK.fJjcQe {
-  background-color: var(--ctp-mocha-mantle) !important;
+.sc-hCPjZK.fJjcQe{
+  background-color: #181825 !important;
 }
 .new-note-todo-buttons > button {
-  background-color: var(--ctp-mocha-lavender) !important;
+  background-color: #B4BEFE !important;
   border: none !important;
 }
 .new-todo-button > span {
-  color: var(--ctp-mocha-crust) !important;
+  color: #11111B !important;
 }
 
 .search-bar {
-  background-color: var(--ctp-mocha-crust) !important;
+  background-color: #11111B !important;
 }
 
 .icon-search {
-  color: var(--ctp-mocha-lavender) !important;
+  color: #B4BEFE !important;
 }
 
 .sort-order-reverse-button {
-  background-color: var(--ctp-mocha-crust) !important;
+  background-color: #11111B !important;
 }
 .sort-order-reverse-button {
-  background-color: var(--ctp-mocha-crust) !important;
+  background-color: #11111B !important;
 }
 
 .fa-calendar-alt {
-  color: var(--ctp-mocha-lavender) !important;
+  color: #B4BEFE !important;
 }
 .fa-long-arrow-alt-up {
-  color: var(--ctp-mocha-lavender) !important;
+  color: #B4BEFE !important;
 }
 /* LIST OF NOTES */
 
 .note-list .list-item-container {
-  background-color: var(--ctp-mocha-mantle) !important;
+  background-color: #181825 !important;
 }
 
 .note-list .list-item-container:hover {
-  background-color: var(--ctp-mocha-overlay1) !important;
+  background-color: #7F849C !important;
 }
 
 .item-list.note-list .list-item-container::before {
@@ -281,17 +255,17 @@ div[height="50"] button span {
 
 .note-list .list-item-container a {
   text-transform: initial;
-  color: var(--ctp-mocha-text) !important;
+  color: #CDD6F4 !important;
   font-weight: var(--regular);
 }
 
 .note-list .list-item-container a:focus {
-  color: var(--ctp-mocha-text) !important;
-  background-color: var(--ctp-mocha-base) !important;
+  color: #CDD6F4 !important;
+  background-color: #1E1E2E !important;
 }
 
 .note-list .list-item-container a:hover {
-  color: var(--ctp-mocha-text) !important;
+  color: #CDD6F4 !important;
 }
 
 /* Add "..." to notes with long titles */
@@ -309,14 +283,15 @@ div[height="50"] button span {
 /* Title */
 /* Changes frequently with updates, need to keep tabs */
 .rli-editor .cCOtNv > input {
-	padding-top: 5px;
-	background-color: var(--ctp-mocha-base) !important;
+  padding-top: 5px;
+  background-color: #1E1E2E !important;
 }
 
 .title-input {
-  background-color: var(--ctp-mocha-base) !important;
-  color: var(--ctp-mocha-text) !important;
+  background-color: #1E1E2E !important;
+  color: #CDD6F4 !important;
 }
+
 .editor-toolbar {
   background-color: transparent !important;
 }
@@ -332,16 +307,17 @@ div[height="50"] button span {
 
 /* Hide "Markdown/Richtext editor" Button */
 .tox-toolbar {
-display: none !important;
+ display: none !important;
 }
 
 /* Hide the Toggle editors button */
 .editor-toolbar button[title="Toggle editors"] {
   display: none !important;
 }
+
 /* Breadcrumbs (In:...) - Used in tag listings */
 .cJOYJm {
-  background-color: var(--ctp-mocha-lavender) !important;
+  background-color: #B4BEFE !important;
   margin: 0px !important;
   padding: 5px !important;
   font-size: var(--font-size) !important;
@@ -354,22 +330,22 @@ display: none !important;
 /* CONTENT */
 /* Empty notebook */
 .rli-editor > div > div:empty {
-  background-color: var(--ctp-mocha-base) !important;
+  background-color: #1E1E2E !important;
 }
 
 /* Editor layout splitter */
 .rli-editor > div > div > div > div > div > div > div:last-of-type {
-  border-color: var(--ctp-mocha-base) !important;
+  border-color: #1E1E2E !important;
 }
 
 div.sc-AxirZ.hagDvo, div.sc-AxirZ.hagDvo > div {
-  background-color: var(--ctp-mocha-mantle) !important;
-  color: var(--ctp-mocha-text) !important;
+  background-color: #181825 !important;
+  color: #CDD6F4 !important;
 }
 
 /* NOTE SEARCH BAR */
 .note-search-bar, .note-search-bar > div > div {
-  background-color: var(--ctp-mocha-base) !important;
+  background-color: #1E1E2E !important;
   width: 100%;
   border: 0 !important;
 }
@@ -377,8 +353,8 @@ div.sc-AxirZ.hagDvo, div.sc-AxirZ.hagDvo > div {
 .note-search-bar input {
   border: 0 !important;
   padding: 5px;
-  color: var(--ctp-mocha-text) !important;
-  background-color: var(--ctp-mocha-base) !important;
+  color: #CDD6F4 !important;
+  background-color: #1E1E2E !important;
 }
 
 /* TAGS */
@@ -387,8 +363,8 @@ div.sc-AxirZ.hagDvo, div.sc-AxirZ.hagDvo > div {
 }
 
 .tag-list > span {
-  color: var(--ctp-mocha-lavender) !important;
-  background-color: var(--ctp-mocha-crust) !important;
+  color: #B4BEFE !important;
+  background-color: #11111B !important;
 }
 
 /* Hide "Click to add tags..."*/
@@ -401,51 +377,51 @@ a[Title="Tags"] + div > span {
 *********************************************************************************/
 
 .cm-s-material-darker.CodeMirror {
-  background-color: var(--ctp-mocha-base) !important;
-  color: var(--ctp-mocha-text) !important;
+  background-color: #1E1E2E !important;
+  color: #CDD6F4 !important;
 }
 
 /* Header */
 .cm-header {
-  color: var(--ctp-mocha-lavender) !important;
+  color: #B4BEFE !important;
 }
 
 /* Italics/Emphasis, Bold, BoldItalics */
 .cm-em, .cm-strong, .cm-strong.cm-em {
-  color: var(--ctp-mocha-text) !important;
+  color: #CDD6F4 !important;
 }
 
 /* Lists (Bullet/number/todo) */
 .cm-variable-2, .cm-variable-3, .cm-keyword {
-  color: var(--ctp-mocha-text) !important;
+  color: #CDD6F4 !important;
 }
 
 .cm-s-material-darker .cm-variable-2.cm-rm-list-token {
-	color: var(--ctp-mocha-text) !important;
+  color: #CDD6F4 !important;
 }
 
 /* Links (link) */
 .cm-url {
-  color: var(--ctp-mocha-rosewater) !important;
+  color: #F5E0DC !important;
   opacity: 1;
   text-decoration: underline;
 }
 
 /* Links (text) */
 .cm-link-text {
-  color: var(--ctp-mocha-rosewater) !important;
+  color: #F5E0DC !important;
 }
 pre.CodeMirror-line {
-    color: var(--ctp-mocha-text) !important;
+    color: #CDD6F4 !important;
     background-color: none !important;
 }
-/* Image links in the editor */
+/* Image link in editor */
 span.cm-string.cm-url.cm-overlay.cm-rm-link.cm-overlay.cm-rm-image {
-  color: var(--ctp-mocha-lavender) !important;
+  color: #B4BEFE !important;
 }
 /* Comment outside code block */
 pre.CodeMirror-line span.cm-comment {
-	color: var(--ctp-mocha-overlay1) !important;
+  color: #7F849C !important;
   background-color: none !important;
   border: 0 !important;
 }
@@ -453,76 +429,76 @@ pre.CodeMirror-line span.cm-comment {
 /* Codeblock selection colour */
 /* For some reason, the CodeMirror selection does not pick the colour correctly, left for now. */
 pre.CodeMirror-line span.CodeMirror-selectedtext {
-	/* background: var(--ctp-mocha-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #585B70 !important; */
+  background: #6B6B6B !important;
 }
 
 div[class^="cm-jn-code-block-background "]::selection {
-  background-color: var(--ctp-mocha-base) !important;
-  border-color: var(--ctp-mocha-base) !important;
+  background-color: #1E1E2E !important;
+  border-color: #1E1E2E !important;
 }
 
 pre.cm-jn-code-block.CodeMirror-line span.cm-comment.cm-jn-monospace.CodeMirror-selectedtext {
-	/* background: var(--ctp-mocha-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #585B70 !important; */
+  background: #6B6B6B !important;
 }
 pre.cm-jn-code-block.CodeMirror-line::selection {
-	/* background: var(--ctp-mocha-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #585B70 !important; */
+  background: #6B6B6B !important;
 }
 div.cm-jn-code-block-background.CodeMirror-linebackground::selection {
-	/* background: var(--ctp-mocha-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #585B70 !important; */
+  background: #6B6B6B !important;
 }
 pre.cm-jn-code-block.CodeMirror-line::selection span {
-	/* background: var(--ctp-mocha-surface2) !important; */
-	background: #6B6B6B !important;
+  /* background: #585B70 !important; */
+  background: #6B6B6B !important;
 }
 
 div.CodeMirror span.cm-comment.cm-jn-inline-code {
-	background-color: transparent !important;
-	padding-right: 0 !important;
+  background-color: transparent !important;
+  padding-right: 0 !important;
   padding-left: 0 !important;
 }
 
 /* Code Block Text */
 div.CodeMirror span.cm-comment:not(.cm-jn-inline-code) {
-  color: var(--ctp-mocha-text) !important;
+  color: #CDD6F4 !important;
   background-color: transparent !important;
 }
 
 /* Code block background */
 div.CodeMirror div.cm-jn-code-block-background {
-    background-color: var(--ctp-mocha-mantle) !important;
+    background-color: #181825 !important;
 }
 
 /* Horizontal Line */
 .cm-hr {
-  color: var(--ctp-mocha-overlay0) !important;
+  color: #6C7086 !important;
 }
 
 /* Cursor colour */
 .CodeMirror-cursor {
-    border-left: 1px solid var(--ctp-mocha-rosewater) !important;
+    border-left: 1px solid #F5E0DC !important;
     border-right: none !important;
     width: 0 !important;
 }
 .cm-fat-cursor div.CodeMirror-cursor {
     width: 10px !important;
     border: 0 !important;
-    background: var(--ctp-mocha-rosewater) !important;
+    background: #F5E0DC !important;
 }
 .cm-fat-cursor div.CodeMirror-cursors {
     z-index: 1 !important;
 }
 .cm-fat-cursor-mark {
-    background-color: rgba(150, 205, 251, 0.5) !important;
+    background-color: rgba(116, 199, 236, 0.50) !important;
 }
 
 .cm-animate-fat-cursor {
     width: auto !important;
     border: 0;
-    background-color: var(--ctp-mocha-rosewater) !important;
+    background-color: #F5E0DC !important;
 }
 
 /* Rich Markdown Extra CSS Classes
@@ -530,11 +506,11 @@ Please opt in "Add additional CSS classes for enhanced customization" in plugin
 settings, see https://github.com/CalebJohn/joplin-rich-markdown#extra-css */
 
 .cm-header.cm-rm-header-token {
-  color: var(--ctp-mocha-green) !important;
+  color: #A6E3A1 !important;
 }
 
 .cm-strong.cm-rm-strong-token {
-  color: var(--ctp-mocha-blue) !important;
+  color: #89B4FA !important;
 }
 
 pre.cm-rm-blockquote.CodeMirror-line {
@@ -544,28 +520,28 @@ pre.cm-rm-blockquote.CodeMirror-line {
 /* Command palette coloring */
 
 div.modal-dialog {
-  background-color: var(--ctp-mocha-mantle) !important;
+  background-color: #181825 !important;
 }
 
 .modal-dialog > div > input {
-  background-color: var(--ctp-mocha-crust) !important;
-  color: var(--ctp-mocha-text) !important;
+  background-color: #11111B !important;
+  color: #CDD6F4 !important;
 }
 
 .modal-dialog > .item-list {
-  background-color: var(--ctp-mocha-crust) !important;
-  color: var(--ctp-mocha-text) !important;
+  background-color: #11111B !important;
+  color: #CDD6F4 !important;
 
 }
 
 .modal-dialog > .item-list div[class="selected"] {
-  background-color: var(--ctp-mocha-surface2) !important;
+  background-color: #585B70 !important;
 }
 
 .modal-dialog > .item-list div[class="selected"] > div {
-  color: var(--ctp-mocha-text) !important;
+  color: #CDD6F4 !important;
 }
 
 .modal-dialog > .item-list > * {
-  color: var(--ctp-mocha-text) !important;
+  color: #CDD6F4 !important;
 }
diff --git a/src/mocha/userstyle.css b/src/mocha/userstyle.css
index 17e68f4..d1c2e99 100644
--- a/src/mocha/userstyle.css
+++ b/src/mocha/userstyle.css
@@ -1,39 +1,12 @@
 /* Style for rendered Markdown */
-
 :root {
-  --ctp-mocha-rosewater: #f5e0dc;
-	--ctp-mocha-flamingo: #f2cdcd;
-	--ctp-mocha-pink: #f5c2e7;
-	--ctp-mocha-mauve: #cba6f7;
-	--ctp-mocha-red: #f38ba8;
-	--ctp-mocha-maroon: #eba0ac;
-	--ctp-mocha-peach: #fab387;
-	--ctp-mocha-yellow: #f9e2af;
-	--ctp-mocha-green: #a6e3a1;
-	--ctp-mocha-teal: #94e2d5;
-	--ctp-mocha-sky: #89dceb;
-	--ctp-mocha-sapphire: #74c7ec;
-	--ctp-mocha-blue: #87b0f9;
-	--ctp-mocha-lavender: #b4befe;
-	--ctp-mocha-text: #c6d0f5;
-	--ctp-mocha-subtext1: #b3bcdf;
-	--ctp-mocha-subtext0: #a1a8c9;
-	--ctp-mocha-overlay2: #8e95b3;
-	--ctp-mocha-overlay1: #7b819d;
-	--ctp-mocha-overlay0: #696d86;
-	--ctp-mocha-surface2: #565970;
-	--ctp-mocha-surface1: #43465a;
-	--ctp-mocha-surface0: #313244;
-	--ctp-mocha-base: #1e1e2e;
-	--ctp-mocha-mantle: #181825;
-	--ctp-mocha-crust: #11111b;
   --white: #D9E0EE;
   --black: #000000;
   --light: #C9CFFF;
   --lighter-grey: #C3BAC6;
   --light-grey: #988BA2;
 
-	--font-face: "Noto Sans", Arial, Helvetica, sans-serif;
+  --font-face: "Noto Sans", Arial, Helvetica, sans-serif;
   --font-mono: "Roboto Mono", Courier, monospace;
   --font-size: 13px;
   --icon-size: 16px;
@@ -47,27 +20,27 @@
 }
 
 #rendered-md, body, th, td {
-  background-color: var(--ctp-mocha-base) !important;
+  background-color: #1E1E2E !important;
   font-family: var(--font-face) !important;
 }
 
 p, ul, ol, li {
-  color: var(--ctp-mocha-text) !important;
+  color: #CDD6F4 !important;
 }
 
 strong {
-  color: var(--ctp-mocha-text) !important;
+  color: #CDD6F4 !important;
 }
 
 hr {
   border: none;
-  border-bottom: 1px solid var(--ctp-mocha-base) !important;
+  border-bottom: 1px solid #1E1E2E !important;
   margin: 2.5em 0 !important;
 }
 
 /* Scrollbars */
 ::-webkit-scrollbar-thumb {
-  background-color: var(--ctp-mocha-base) !important;
+  background-color: #1E1E2E !important;
   border-radius: var(--scroll-radius) !important;
 }
 
@@ -76,7 +49,7 @@ hr {
 *********************************************************************************/
 
 h1 {
-  border-bottom: 1px solid var(--ctp-mocha-base) !important;
+  border-bottom: 1px solid #1E1E2E !important;
   font-weight: var(--bolder) !important;
 }
 
@@ -90,7 +63,7 @@ h2, h3, h4, h5, h6 {
 *********************************************************************************/
 
 a {
-  color: var(--ctp-mocha-rosewater) !important;
+  color: #F5E0DC !important;
   text-decoration: underline !important;
 }
 
@@ -100,7 +73,7 @@ a:hover {
 
 /* Joplin icon in Joplin link */
 .resource-icon {
-  background-color: var(--ctp-mocha-rosewater) !important;
+  background-color: #F5E0DC !important;
 }
 
 /*********************************************************************************
@@ -108,10 +81,10 @@ a:hover {
 *********************************************************************************/
 
 pre, .hljs {
-  background-color: var(--ctp-mocha-mantle) !important;
+  background-color: #181825 !important;
   font-family: var(--font-mono) !important;
   padding: 10px !important;
-  color: var(--ctp-mocha-text) !important;
+  color: #CDD6F4 !important;
   font-size: 14px !important;
   overflow: scroll !important;
 }
@@ -121,7 +94,7 @@ pre, .hljs {
   background-color: transparent !important;
   border: 0 !important;
   font-family: var(--font-mono) !important;
-  color: var(--ctp-mocha-yellow) !important;
+  color: #F9E2AF !important;
   font-size: 14px !important;
 }
 
@@ -130,13 +103,13 @@ pre, .hljs {
 *********************************************************************************/
 
 blockquote {
-  background-color: var(--ctp-mocha-surface0) !important;
+  background-color: #313244 !important;
   padding: 10px !important;
   color: var(--light) !important;
   font-size: 14px !important;
   font-style: italic !important;
   border: 0 !important;
-  border-left: 5px solid var(--ctp-mocha-mantle) !important;
+  border-left: 5px solid #181825 !important;
 }
 
 /*********************************************************************************
@@ -144,15 +117,15 @@ blockquote {
 *********************************************************************************/
 
 th {
-  border: 1px solid var(--ctp-mocha-text) !important;
-  color: var(--ctp-mocha-text) !important;
-  border-bottom: 1px solid var(--ctp-mocha-text) !important;
+  border: 1px solid #CDD6F4 !important;
+  color: #CDD6F4 !important;
+  border-bottom: 1px solid #CDD6F4 !important;
 }
 
 td {
-  border: 1px solid var(--ctp-mocha-text) !important;
-  color: var(--ctp-mocha-text) !important;
-  border-bottom: 1px solid var(--ctp-mocha-text) !important;
+  border: 1px solid #CDD6F4 !important;
+  color: #CDD6F4 !important;
+  border-bottom: 1px solid #CDD6F4 !important;
 }
 
 /*********************************************************************************
@@ -160,18 +133,18 @@ td {
 *********************************************************************************/
 
 ::selection {
-	background-color: var(--ctp-mocha-lavender) !important;
-  color: var(--ctp-mocha-crust) !important;
+  background-color: #B4BEFE !important;
+  color: #11111B !important;
 }
 
 mark, mark strong {
-  background: var(--ctp-mocha-yellow) !important;
-  color: var(--ctp-mocha-crust) !important;
+  background: #F9E2AF !important;
+  color: #11111B !important;
 }
 
 /* Highlighted searched item */
 mark[data-markjs] {
-  background-color: var(--ctp-mocha-lavender) !important;
+  background-color: #B4BEFE !important;
 }
 
 /*********************************************************************************
@@ -189,8 +162,8 @@ mark[data-markjs] {
 /* Container for spoiler title */
 #spoiler-block-title {
   font-family: var(--font-face) !important;
-  color: var(--ctp-mocha-text) !important;
-  background-color: var(--ctp-mocha-mantle) !important;
+  color: #CDD6F4 !important;
+  background-color: #181825 !important;
   border-radius: 0px;
 }
 
@@ -198,17 +171,17 @@ mark[data-markjs] {
 #spoiler-block-body {
   font-family: var(--font-face) !important;
   color: var(--light) !important;
-  background-color: var(--ctp-mocha-mantle) !important;
+  background-color: #181825 !important;
   border-radius: 0px;
 }
 
 /* Styling of the spoiler block body */
 .summary-content {
-  background-color: var(--ctp-mocha-mantle) !important;
+  background-color: #181825 !important;
 }
 
 .summary-title:before {
-  color: var(--ctp-mocha-lavender) !important;
+  color: #B4BEFE !important;
 }
 
 /*********************************************************************************
@@ -226,22 +199,21 @@ mark[data-markjs] {
   p, ul, ol, li {
     color: var(--black) !important;
   }
-  
+
   strong {
     color: var(--black) !important;
   }
-
-th {
+  th {
   border: 1px solid var(--black) !important;
   color: var(--black) !important;
   border-bottom: 1px solid var(--black) !important;
-}
+  }
 
-td {
+  td {
   border: 1px solid var(--black) !important;
   color: var(--black) !important;
   border-bottom: 1px solid var(--black) !important;
-}
+  }
 
   h1 {
     border-bottom: 1px solid var(--black) !important;
@@ -260,7 +232,7 @@ td {
   }
 
   a {
-    color: var(--ctp-mocha-red) !important;
+    color: #F38BA8 !important;
     text-decoration: underline !important;
   }
 
@@ -269,8 +241,7 @@ td {
   background-color: #F8F8F8 !important;
   border: 0 !important;
   font-family: var(--font-mono) !important;
-  /* color: var(--ctp-mocha-yellow) !important; */
-  /* color: # !important; */
+  /* color: #F9E2AF !important; */
   font-size: 14px !important;
 }
 
@@ -278,7 +249,7 @@ pre, .hljs {
   background-color: #F8F8F8 !important;
   font-family: var(--font-mono) !important;
   padding: 10px !important;
-  color: var(--ctp-mocha-crust) !important;
+  color: #11111B !important;
   font-size: 14px !important;
   overflow: scroll !important;
 }
@@ -286,7 +257,7 @@ pre, .hljs {
 blockquote {
   background-color: #F8F8F8 !important;
   padding: 10px !important;
-  color: var(--ctp-mocha-crust) !important;
+  color: #11111B !important;
   font-size: 14px !important;
   font-style: italic !important;
   border: 0 !important;
diff --git a/templates/userchrome.tera b/templates/userchrome.tera
new file mode 100644
index 0000000..26bf581
--- /dev/null
+++ b/templates/userchrome.tera
@@ -0,0 +1,555 @@
+---
+whiskers:
+  version: 2.4.0
+  matrix:
+    - flavor
+  filename: "src/{{ flavor.identifier }}/userchrome.css"
+  hex_format: "#{{R}}{{G}}{{B}}"
+---
+/* Original theme at https://github.com/stysebae/joplin-vsc-material-theme, modified for Catppuccin. */
+/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */
+
+:root {
+  --font-face: "Noto Sans", Arial, Helvetica, sans-serif;
+  --font-mono: "Roboto Mono", Courier, monospace;
+  --font-size: 13px;
+  --icon-size: 16px;
+
+  --regular: 400;
+  --bolder: 600;
+
+  --scroll-radius: 3px;
+
+  --opacity-0-8: 0.8;
+}
+
+/* Font used by Joplin */
+* {
+  font-family: var(--font-face) !important;
+}
+
+html, body {
+  background-color: {{ base.hex }} !important;
+  font-size: var(--font-size) !important;
+  font-weight: var(--regular) !important;
+  color: var(--light) !important;
+}
+.CodeMirror-selected {
+    /* background-color: var(--lighter-grey) !important; */
+    background: #6B6B6B !important;
+}
+.rli-root {
+  background-color: {{ base.hex }} !important;
+}
+
+/* Icons */
+.fa, .far, .fas {
+  font-weight: 900 !important;
+  font-family: "Font Awesome 5 Free" !important;
+  font-size: var(--icon-size) !important;
+}
+
+::placeholder {
+  color: {{ lavender.hex }} !important;
+}
+
+/* Scrollbars */
+::-webkit-scrollbar-thumb {
+  background-color: {{ surface0.hex }} !important;
+  border-radius: var(--scroll-radius) !important;
+}
+
+/*********************************************************************************
+* PANELS
+*********************************************************************************/
+
+/* General panel style */
+.resizableLayoutItem > div {
+  background-color: {{ base.hex }} !important;
+}
+
+/*********************************************************************************
+* SIDEBAR
+*********************************************************************************/
+
+.sidebar {
+  background-color: {{ crust.hex }} !important;
+  text-transform: uppercase;
+  font-weight: var(--bolder);
+}
+
+/* Hide "All notes" icon
+ * Comment this next block if you want the "All notes" icon */
+i.icon-notes {
+  display: none !important;
+}
+
+/* FOLDERS */
+
+/* "Add new notebook" button */
+.sidebar > div > div > button span {
+  color: {{ lavender.hex }} !important;
+}
+
+.sidebar > div > div > button:hover {
+  opacity: var(--opacity-0-8);
+}
+.folders .list-item-container {
+    background-color: {{ crust.hex }} !important;
+}
+.folders .list-item-container:hover {
+  background-color: {{ overlay0.hex }} !important;
+}
+
+.folders .list-item-container a {
+  text-transform: initial;
+  color: {{ text.hex }} !important;
+  font-weight: var(--regular);
+}
+
+.folders .list-item-container a:focus {
+  color: {{ text.hex }} !important;
+  background-color: {{ base.hex }} !important;
+}
+
+.folders .list-item-container a:hover {
+  color: {{ text.hex }} !important;
+}
+
+/* TAGS */
+.tags .list-item-container {
+    display: inline-block;
+    line-height: 0 !important;
+    padding: 0 !important;
+    height: auto !important;
+    background-color: {{ crust.hex }} !important;
+}
+.tags .list-item-container:hover {
+  display: inline-block;
+  line-height: 0 !important;
+  padding: 0 !important;
+  height: auto !important;
+  background-color: {{ overlay0.hex }} !important;
+}
+
+.tags .list-item-container a {
+  padding-left: 12px !important;
+  text-transform: initial;
+  color: {{ text.hex }} !important;
+  font-weight: var(--regular);
+}
+
+.tags .list-item-container a:focus {
+  color: {{ text.hex }} !important;
+  background-color: {{ base.hex }} !important;
+}
+
+.tags .list-item-container a:hover {
+  color: {{ text.hex }} !important;
+  background-color: {{ overlay0.hex }} !important;
+}
+
+/* SYNCHRONIZATION */
+
+.sidebar > div:last-of-type {
+  background-color: none !important;
+}
+
+.sidebar > div:last-of-type > button {
+  background-color: {{ lavender.hex }} !important;
+  border: 0px !important;
+  text-transform: uppercase;
+  font-size: var(--font-size) !important;
+}
+
+.sidebar > div:last-of-type > button:hover {
+  opacity: var(--opacity-0-8);
+}
+
+.sidebar > div:last-of-type > button > span {
+  color: {{ crust.hex }} !important;
+}
+
+/*********************************************************************************
+*NOTE LIST
+*********************************************************************************/
+
+.note-list {
+  background-color: {{ mantle.hex }} !important;
+  border: none !important;
+}
+
+/* Empty notelist */
+.cLdGCO, .cLdGCO > div {
+  background-color: {{ mantle.hex }} !important;
+}
+
+/* Remove border - introduced in 1.3.7 */
+.rli-noteList div {
+  border: none !important;
+}
+
+/* BUTTONS SEARCH, SORT NOTES, NEW NOTE AND NEW TASK */
+
+div[height="50"] {
+  background-color: {{ mantle.hex }} !important;
+}
+
+div[height="50"] input {
+  border: none !important;
+  color: {{ text.hex }} !important;
+  background-color: {{ mantle.hex }} !important;
+}
+
+div[height="50"] button {
+  background: transparent !important;
+  color: {{ text.hex }} !important;
+  border: 0 !important;
+}
+
+div[height="50"] button:hover {
+  opacity: var(--opacity-0-8);
+}
+
+div[height="50"] button span {
+  color: {{ text.hex }} !important;
+}
+
+.sc-hCPjZK.fJjcQe{
+  background-color: {{ mantle.hex }} !important;
+}
+.new-note-todo-buttons > button {
+  background-color: {{ lavender.hex }} !important;
+  border: none !important;
+}
+.new-todo-button > span {
+  color: {{ crust.hex }} !important;
+}
+
+.search-bar {
+  background-color: {{ crust.hex }} !important;
+}
+
+.icon-search {
+  color: {{ lavender.hex }} !important;
+}
+
+.sort-order-reverse-button {
+  background-color: {{ crust.hex }} !important;
+}
+.sort-order-reverse-button {
+  background-color: {{ crust.hex }} !important;
+}
+
+.fa-calendar-alt {
+  color: {{ lavender.hex }} !important;
+}
+.fa-long-arrow-alt-up {
+  color: {{ lavender.hex }} !important;
+}
+/* LIST OF NOTES */
+
+.note-list .list-item-container {
+  background-color: {{ mantle.hex }} !important;
+}
+
+.note-list .list-item-container:hover {
+  background-color: {{ overlay1.hex }} !important;
+}
+
+.item-list.note-list .list-item-container::before {
+  border: none !important;
+}
+
+.note-list .list-item-container a {
+  text-transform: initial;
+  color: {{ text.hex }} !important;
+  font-weight: var(--regular);
+}
+
+.note-list .list-item-container a:focus {
+  color: {{ text.hex }} !important;
+  background-color: {{ base.hex }} !important;
+}
+
+.note-list .list-item-container a:hover {
+  color: {{ text.hex }} !important;
+}
+
+/* Add "..." to notes with long titles */
+.item-list.note-list .list-item-container > a > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/*********************************************************************************
+* EDITOR
+*********************************************************************************/
+
+/* EDITOR TOOLBAR */
+
+/* Title */
+/* Changes frequently with updates, need to keep tabs */
+.rli-editor .cCOtNv > input {
+  padding-top: 5px;
+  background-color: {{ base.hex }} !important;
+}
+
+.title-input {
+  background-color: {{ base.hex }} !important;
+  color: {{ text.hex }} !important;
+}
+
+.editor-toolbar {
+  background-color: transparent !important;
+}
+
+.editor-toolbar > div > a:hover {
+  opacity: var(--opacity-0-8);
+}
+
+/* Hide "Spell checker" button */
+.editor-toolbar a[title="Spell checker"] {
+ display: none !important;
+}
+
+/* Hide "Markdown/Richtext editor" Button */
+.tox-toolbar {
+ display: none !important;
+}
+
+/* Hide the Toggle editors button */
+.editor-toolbar button[title="Toggle editors"] {
+  display: none !important;
+}
+
+/* Breadcrumbs (In:...) - Used in tag listings */
+.cJOYJm {
+  background-color: {{ lavender.hex }} !important;
+  margin: 0px !important;
+  padding: 5px !important;
+  font-size: var(--font-size) !important;
+}
+
+.cJOYJm:hover {
+  opacity: var(--opacity-0-8);
+}
+
+/* CONTENT */
+/* Empty notebook */
+.rli-editor > div > div:empty {
+  background-color: {{ base.hex }} !important;
+}
+
+/* Editor layout splitter */
+.rli-editor > div > div > div > div > div > div > div:last-of-type {
+  border-color: {{ base.hex }} !important;
+}
+
+div.sc-AxirZ.hagDvo, div.sc-AxirZ.hagDvo > div {
+  background-color: {{ mantle.hex }} !important;
+  color: {{ text.hex }} !important;
+}
+
+/* NOTE SEARCH BAR */
+.note-search-bar, .note-search-bar > div > div {
+  background-color: {{ base.hex }} !important;
+  width: 100%;
+  border: 0 !important;
+}
+
+.note-search-bar input {
+  border: 0 !important;
+  padding: 5px;
+  color: {{ text.hex }} !important;
+  background-color: {{ base.hex }} !important;
+}
+
+/* TAGS */
+.tag-bar {
+  background-color: transparent !important;
+}
+
+.tag-list > span {
+  color: {{ lavender.hex }} !important;
+  background-color: {{ crust.hex }} !important;
+}
+
+/* Hide "Click to add tags..."*/
+a[Title="Tags"] + div > span {
+  display: none !important;
+}
+
+/*********************************************************************************
+* EDITOR (CODE MIRROR)
+*********************************************************************************/
+
+.cm-s-material-darker.CodeMirror {
+  background-color: {{ base.hex }} !important;
+  color: {{ text.hex }} !important;
+}
+
+/* Header */
+.cm-header {
+  color: {{ lavender.hex }} !important;
+}
+
+/* Italics/Emphasis, Bold, BoldItalics */
+.cm-em, .cm-strong, .cm-strong.cm-em {
+  color: {{ text.hex }} !important;
+}
+
+/* Lists (Bullet/number/todo) */
+.cm-variable-2, .cm-variable-3, .cm-keyword {
+  color: {{ text.hex }} !important;
+}
+
+.cm-s-material-darker .cm-variable-2.cm-rm-list-token {
+  color: {{ text.hex }} !important;
+}
+
+/* Links (link) */
+.cm-url {
+  color: {{ rosewater.hex }} !important;
+  opacity: 1;
+  text-decoration: underline;
+}
+
+/* Links (text) */
+.cm-link-text {
+  color: {{ rosewater.hex }} !important;
+}
+pre.CodeMirror-line {
+    color: {{ text.hex }} !important;
+    background-color: none !important;
+}
+/* Image link in editor */
+span.cm-string.cm-url.cm-overlay.cm-rm-link.cm-overlay.cm-rm-image {
+  color: {{ lavender.hex }} !important;
+}
+/* Comment outside code block */
+pre.CodeMirror-line span.cm-comment {
+  color: {{ overlay1.hex }} !important;
+  background-color: none !important;
+  border: 0 !important;
+}
+
+/* Codeblock selection colour */
+/* For some reason, the CodeMirror selection does not pick the colour correctly, left for now. */
+pre.CodeMirror-line span.CodeMirror-selectedtext {
+  /* background: {{ surface2.hex }} !important; */
+  background: #6B6B6B !important;
+}
+
+div[class^="cm-jn-code-block-background "]::selection {
+  background-color: {{ base.hex }} !important;
+  border-color: {{ base.hex }} !important;
+}
+
+pre.cm-jn-code-block.CodeMirror-line span.cm-comment.cm-jn-monospace.CodeMirror-selectedtext {
+  /* background: {{ surface2.hex }} !important; */
+  background: #6B6B6B !important;
+}
+pre.cm-jn-code-block.CodeMirror-line::selection {
+  /* background: {{ surface2.hex }} !important; */
+  background: #6B6B6B !important;
+}
+div.cm-jn-code-block-background.CodeMirror-linebackground::selection {
+  /* background: {{ surface2.hex }} !important; */
+  background: #6B6B6B !important;
+}
+pre.cm-jn-code-block.CodeMirror-line::selection span {
+  /* background: {{ surface2.hex }} !important; */
+  background: #6B6B6B !important;
+}
+
+div.CodeMirror span.cm-comment.cm-jn-inline-code {
+  background-color: transparent !important;
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+
+/* Code Block Text */
+div.CodeMirror span.cm-comment:not(.cm-jn-inline-code) {
+  color: {{ text.hex }} !important;
+  background-color: transparent !important;
+}
+
+/* Code block background */
+div.CodeMirror div.cm-jn-code-block-background {
+    background-color: {{ mantle.hex }} !important;
+}
+
+/* Horizontal Line */
+.cm-hr {
+  color: {{ overlay0.hex }} !important;
+}
+
+/* Cursor colour */
+.CodeMirror-cursor {
+    border-left: 1px solid {{ rosewater.hex }} !important;
+    border-right: none !important;
+    width: 0 !important;
+}
+.cm-fat-cursor div.CodeMirror-cursor {
+    width: 10px !important;
+    border: 0 !important;
+    background: {{ rosewater.hex }} !important;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
+    z-index: 1 !important;
+}
+.cm-fat-cursor-mark {
+    background-color: {{ sapphire | mod(opacity=0.5) | css_rgba }} !important;
+}
+
+.cm-animate-fat-cursor {
+    width: auto !important;
+    border: 0;
+    background-color: {{ rosewater.hex }} !important;
+}
+
+/* Rich Markdown Extra CSS Classes
+Please opt in "Add additional CSS classes for enhanced customization" in plugin
+settings, see https://github.com/CalebJohn/joplin-rich-markdown#extra-css */
+
+.cm-header.cm-rm-header-token {
+  color: {{ green.hex }} !important;
+}
+
+.cm-strong.cm-rm-strong-token {
+  color: {{ blue.hex }} !important;
+}
+
+pre.cm-rm-blockquote.CodeMirror-line {
+  font-style: italic !important;
+}
+
+/* Command palette coloring */
+
+div.modal-dialog {
+  background-color: {{ mantle.hex }} !important;
+}
+
+.modal-dialog > div > input {
+  background-color: {{ crust.hex }} !important;
+  color: {{ text.hex }} !important;
+}
+
+.modal-dialog > .item-list {
+  background-color: {{ crust.hex }} !important;
+  color: {{ text.hex }} !important;
+
+}
+
+.modal-dialog > .item-list div[class="selected"] {
+  background-color: {{ surface2.hex }} !important;
+}
+
+.modal-dialog > .item-list div[class="selected"] > div {
+  color: {{ text.hex }} !important;
+}
+
+.modal-dialog > .item-list > * {
+  color: {{ text.hex }} !important;
+}
diff --git a/templates/userstyle.tera b/templates/userstyle.tera
new file mode 100644
index 0000000..28d3e4a
--- /dev/null
+++ b/templates/userstyle.tera
@@ -0,0 +1,275 @@
+---
+whiskers:
+  version: 2.4.0
+  matrix:
+    - flavor
+  filename: "src/{{ flavor.identifier }}/userstyle.css"
+  hex_format: "#{{R}}{{G}}{{B}}"
+---
+/* Style for rendered Markdown */
+:root {
+  --white: #D9E0EE;
+  --black: #000000;
+  --light: #C9CFFF;
+  --lighter-grey: #C3BAC6;
+  --light-grey: #988BA2;
+
+  --font-face: "Noto Sans", Arial, Helvetica, sans-serif;
+  --font-mono: "Roboto Mono", Courier, monospace;
+  --font-size: 13px;
+  --icon-size: 16px;
+
+  --regular: 400;
+  --bolder: 600;
+
+  --scroll-radius: 3px;
+
+  --opacity-0-8: 0.8;
+}
+
+#rendered-md, body, th, td {
+  background-color: {{ base.hex }} !important;
+  font-family: var(--font-face) !important;
+}
+
+p, ul, ol, li {
+  color: {{ text.hex }} !important;
+}
+
+strong {
+  color: {{ text.hex }} !important;
+}
+
+hr {
+  border: none;
+  border-bottom: 1px solid {{ base.hex }} !important;
+  margin: 2.5em 0 !important;
+}
+
+/* Scrollbars */
+::-webkit-scrollbar-thumb {
+  background-color: {{ base.hex }} !important;
+  border-radius: var(--scroll-radius) !important;
+}
+
+/*********************************************************************************
+* TITLES
+*********************************************************************************/
+
+h1 {
+  border-bottom: 1px solid {{ base.hex }} !important;
+  font-weight: var(--bolder) !important;
+}
+
+h2, h3, h4, h5, h6 {
+  border-bottom: 0 !important;
+  font-weight: var(--regular) !important;
+}
+
+/*********************************************************************************
+* LINKS
+*********************************************************************************/
+
+a {
+  color: {{ rosewater.hex }} !important;
+  text-decoration: underline !important;
+}
+
+a:hover {
+  text-decoration: underline !important;
+}
+
+/* Joplin icon in Joplin link */
+.resource-icon {
+  background-color: {{ rosewater.hex }} !important;
+}
+
+/*********************************************************************************
+* CODE BLOCK
+*********************************************************************************/
+
+pre, .hljs {
+  background-color: {{ mantle.hex }} !important;
+  font-family: var(--font-mono) !important;
+  padding: 10px !important;
+  color: {{ text.hex }} !important;
+  font-size: 14px !important;
+  overflow: scroll !important;
+}
+
+/* Inline code */
+.inline-code {
+  background-color: transparent !important;
+  border: 0 !important;
+  font-family: var(--font-mono) !important;
+  color: {{ yellow.hex }} !important;
+  font-size: 14px !important;
+}
+
+/*********************************************************************************
+* BLOCKQUOTE
+*********************************************************************************/
+
+blockquote {
+  background-color: {{ surface0.hex }} !important;
+  padding: 10px !important;
+  color: var(--light) !important;
+  font-size: 14px !important;
+  font-style: italic !important;
+  border: 0 !important;
+  border-left: 5px solid {{ mantle.hex }} !important;
+}
+
+/*********************************************************************************
+* TABLES
+*********************************************************************************/
+
+th {
+  border: 1px solid {{ text.hex }} !important;
+  color: {{ text.hex }} !important;
+  border-bottom: 1px solid {{ text.hex }} !important;
+}
+
+td {
+  border: 1px solid {{ text.hex }} !important;
+  color: {{ text.hex }} !important;
+  border-bottom: 1px solid {{ text.hex }} !important;
+}
+
+/*********************************************************************************
+* HIGHLIGHTING
+*********************************************************************************/
+
+::selection {
+  background-color: {{ lavender.hex }} !important;
+  color: {{ crust.hex }} !important;
+}
+
+mark, mark strong {
+  background: {{ yellow.hex }} !important;
+  color: {{ crust.hex }} !important;
+}
+
+/* Highlighted searched item */
+mark[data-markjs] {
+  background-color: {{ lavender.hex }} !important;
+}
+
+/*********************************************************************************
+* PLUGINS
+*********************************************************************************/
+
+/* SPOILERS (https://github.com/martinkorelic/joplin-plugin-spoilers) */
+
+/* Container for spoiler blocks */
+.spoiler-block {
+  border: 0 !important;
+  border-radius: 0px;
+}
+
+/* Container for spoiler title */
+#spoiler-block-title {
+  font-family: var(--font-face) !important;
+  color: {{ text.hex }} !important;
+  background-color: {{ mantle.hex }} !important;
+  border-radius: 0px;
+}
+
+/* Container for spoiler body */
+#spoiler-block-body {
+  font-family: var(--font-face) !important;
+  color: var(--light) !important;
+  background-color: {{ mantle.hex }} !important;
+  border-radius: 0px;
+}
+
+/* Styling of the spoiler block body */
+.summary-content {
+  background-color: {{ mantle.hex }} !important;
+}
+
+.summary-title:before {
+  color: {{ lavender.hex }} !important;
+}
+
+/*********************************************************************************
+* PRINT VERSION
+*********************************************************************************/
+
+@media print {
+
+  #rendered-md, body, th, td {
+    /* background-color: var(--white) !important; */
+    background-color: #ffffff !important;
+    font-family: var(--font-face) !important;
+  }
+
+  p, ul, ol, li {
+    color: var(--black) !important;
+  }
+
+  strong {
+    color: var(--black) !important;
+  }
+  th {
+  border: 1px solid var(--black) !important;
+  color: var(--black) !important;
+  border-bottom: 1px solid var(--black) !important;
+  }
+
+  td {
+  border: 1px solid var(--black) !important;
+  color: var(--black) !important;
+  border-bottom: 1px solid var(--black) !important;
+  }
+
+  h1 {
+    border-bottom: 1px solid var(--black) !important;
+    font-weight: var(--bolder) !important;
+  }
+
+  h2, h3, h4, h5, h6 {
+    border-bottom: 0 !important;
+    font-weight: var(--bolder) !important;
+  }
+
+  hr {
+    border: none;
+    border-bottom: 1px solid var(--black) !important;
+    margin: 2.5em 0 !important;
+  }
+
+  a {
+    color: {{ red.hex }} !important;
+    text-decoration: underline !important;
+  }
+
+/* Inline code */
+.inline-code {
+  background-color: #F8F8F8 !important;
+  border: 0 !important;
+  font-family: var(--font-mono) !important;
+  /* color: {{ yellow.hex }} !important; */
+  font-size: 14px !important;
+}
+
+pre, .hljs {
+  background-color: #F8F8F8 !important;
+  font-family: var(--font-mono) !important;
+  padding: 10px !important;
+  color: {{ crust.hex }} !important;
+  font-size: 14px !important;
+  overflow: scroll !important;
+}
+
+blockquote {
+  background-color: #F8F8F8 !important;
+  padding: 10px !important;
+  color: {{ crust.hex }} !important;
+  font-size: 14px !important;
+  font-style: italic !important;
+  border: 0 !important;
+  border-left: 5px solid #E8E8E8 !important;
+}
+
+}