CSS to make the Zettlr editor look prettier

zettlr.css

/*
Use paired with Bielefeld theme in dark mode 
See also: https://github.com/Zettlr/Zettlr/discussions/2863
*/

/* ----------------- */
/* Light mode styles */
/* ----------------- */

.CodeMirror .cm-quote {
  color: var(--c-primary);
}

.CodeMirror .cm-em {
  color: var(--c-primary);
}


/* ---------------- */
/* Dark mode styles */
/* ---------------- */

/* Background color */
body.dark #editor {
   background-color: rgba(32, 33, 37, 1);
}

/* Generic tags */
body.dark #editor .CodeMirror .cm-zkn-tag {
   background-color: rgba(275,171,171, 1);
   color: rgba(138,0,0, 1);
   padding: 2px;
   border-radius:5px;
}

/* Custom colors for custom tags */
.cm-zkn-tag-software {
   background-color: #ffe599 !important;
   color:#7e6100 !important;
}

.cm-zkn-tag-sota {
   background-color: #d8ead2 !important;
   color:#274e13 !important;
}

.cm-zkn-tag-cv, .cm-zkn-tag-nlp {
   background-color: #d8d3e9 !important;
   color:#21134d !important;
}

.cm-zkn-tag-easy, .cm-zkn-tag-medium, .cm-zkn-tag-hard {
   background-color: #c8daf9 !important;
   color:#1c4587 !important;
}

/* Quotes */
body.dark .CodeMirror .cm-quote {
   color: rgba(250, 160, 85, 1);
}

/* Italics */
body.dark .CodeMirror .cm-em {
   color: rgba(255, 165, 230, 1);
}

/*
Links 
 .cma - link preview 
 .cm-link - link text
 .cm-url - link url
*/
body.dark #editor .CodeMirror :is(.cma, .cm-url) {
   color: rgba(0,204,153, 1);
}

/* Bullet points */
body.dark #editor .CodeMirror .cm-formatting-list {
   color: rgba(255, 242, 0, 1);
}

/* Horizontal rule */
body.dark #editor .CodeMirror .cm-hr {
    display: inline-block;
    width: 100%;
    line-height: 0.25;
    color: transparent;
    background: linear-gradient(90deg, var(--c-primary),  #7beac3, transparent);
}

/* Internal links */
body.dark #editor .cm-zkn-link:not(:hover) {
	font-size: .01em;
  	visibility: hidden;
    color: rgba(0,204,153, 1);
}
body.dark #editor .cm-zkn-link:not(:hover)::after {
    font-size: 100em;
    content: '↗';
    visibility: visible;
    color: rgba(0,204,153, 1);
}
body.dark #editor .CodeMirror :is(.cm-zkn-link, .cm-zkn-link-formatting) {
    color: rgba(0,204,153, 1);
}

/* IDs */
body.dark #editor .cm-zkn-id:not(:hover) {
	font-size: .01em;
  	visibility: hidden;
    color: rgba(252, 186, 3, 1);
}
body.dark #editor .cm-zkn-id:not(:hover)::after {
    font-size: 100em;
    /*content: '\1F194';*/
    content: '\1F3F7 ID';
    visibility: visible;
    font-weight: bold;
    color: rgba(252, 186, 3, 1);
}
body.dark #editor .CodeMirror .cm-zkn-id {
    color: rgba(252, 186, 3, 1);
}

This is how the result is rendered: