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
*/

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

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

/* Generic tags */
body.dark .cm-zkn-tag {
   background-color: rgba(200, 200, 200, 1);
   color: rgba(74, 74, 74, 1);
   padding: 2px;
   border-radius:5px;
}

/* Custom colors for custom tags */
body.dark .cm-zkn-tag-todo > .cm-zkn-tag {
  background-color: rgba(275,171,171, 1);
  color: rgba(138,0,0, 1);
}

body.dark .cm-zkn-tag-software > .cm-zkn-tag {
  background-color: #ffe599;
  color: #7e6100;
}

body.dark :is(.cm-zkn-tag-sota, .cm-zkn-tag-done)  > .cm-zkn-tag {
  background-color: #d8ead2;
  color: #274e13;
}

body.dark :is(.cm-zkn-tag-cv, .cm-zkn-tag-nlp, .cm-zkn-tag-tabular, .cm-zkn-tag-aka, .cm-zkn-tag-tldr)  > .cm-zkn-tag {
  background-color: #d8d3e9;
  color: #21134d;
}

body.dark :is(.cm-zkn-tag-easy, .cm-zkn-tag-medium, .cm-zkn-tag-hard, .cm-zkn-tag-resources)  > .cm-zkn-tag {
  background-color: #c8daf9;
  color: #1c4587;
}

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

/* Bold */
body.dark .cm-editor .cm-strong {
   color: rgba(182, 249, 250, 1);
}

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

/* Monospace */
body.dark .cm-editor .cm-monospace {
   color: rgba(255, 255, 255, 1);
   background-color: rgba(70, 70, 70, 1);
   padding: 2px;
   padding-right: 5px;
   padding-left: 5px;
   border-radius: 5px;
}

.code-block-line {
   background-color: rgba(70, 70, 70, 1);
}

/*
Links 
 .cma - link preview 
 .cm-label-name - link text
 .cm-url - url link
*/
body.dark .cm-editor :is(.markdown-link, .cm-label-name, .cm-url) {
   color: rgba(0,204,153, 1) !important;
   text-decoration: none;
}

:is(.markdown-link, .cm-label-name, .cm-url):hover {
  cursor: pointer;
}

.my-hover-element:hover {
  cursor: pointer; /* hand pointer on hover */
}

/* Bullet points */
body.dark .cm-editor .cm-list.cm-code-mark {
   color: rgba(255, 242, 0, 0.8);
}

/* Bold marks */
body.dark .cm-editor .cm-strong.cm-code-mark {
   color: rgba(204, 204, 204, 0.4);
}

/* Italic marks */
body.dark .cm-editor .cm-emphasis.cm-code-mark {
   color: rgba(204, 204, 204, 0.4);
}

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

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

/* IDs */
body.dark .cm-editor .cm-zkn-id:not(:hover) {
	font-size: .01em;
  	visibility: hidden;
    color: rgba(252, 186, 3, 1);
}
body.dark .cm-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 .cm-editor .CodeMirror .cm-zkn-id {
    color: rgba(252, 186, 3, 1);
}

/** Customize scrollbar
- nice grey color that fits dark theme
- bigger size when hovering

ref: https://stackoverflow.com/a/70089996
------------------------------------------------------------*/

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-thumb {
  background: #ababab;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover{
  border: 0;
}

::-webkit-scrollbar-track {
  background: transparent;
}

This is how the result is rendered:

Updated for zettlr 3.6.0