Zettlr (https://zettlr.com/) custom theme (https://docs.zettlr.com/en/core/custom-css/)

zettlr.css

/*
DJ's Zettlr CSS customization's :: https://dj.je
https://gist.github.com/djsime1/2cffa7bada88573d12523ed0031eb27c
Revision 1 :: Suggestions are welcome in comments!

Current customizations:
> Horizontal rules (---) now displays as such.
> Headers (h1-h6) use Roboto Slab font.
> Code segments (inline and blocks) use JetBrains Mono font.
> URL's are underlined.
> Scrollbars have been excommunicated.
> Window menu bar now has a slight gradient.
> Window menu bar is missing the Zettlr logo. (todo: bring it back)
> A few color changes around the UI to make it more uniform.
> Active document tab now identified with bottom border.
> Editor area is slightly skeumorphic, with inner shadow and grainy background.
*/

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Roboto+Slab&display=swap');

::-webkit-scrollbar {
    width: 0;
}

#menubar {
    background: linear-gradient(180deg, transparent 33%, #00000048), var(--system-accent-color);
    padding-left: 0;
}

.cm-header {
    font-family: 'Roboto Slab', serif;
}

.cm-fenced-code,
.cm-comment {
    font-family: 'JetBrains Mono', monospace !important;
}

.cm-hr {
    display: inline-block;
    width: 100%;
    line-height: 0.25;
    color: transparent;
    background: linear-gradient(90deg, var(--c-primary), var(--c-primary-shade), transparent);
}

.CodeMirror {
    background-color: transparent;
}

body #file-tree {
    background-color: transparent !important;
}

body #editor .CodeMirror .cma,
body .dialog .CodeMirror .cma {
    text-decoration: underline;
}

/* Dark */

body.dark #editor {
    background-color: transparent;
    background: linear-gradient(to top, #080808AA, #181818AA), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeBlend mode='screen'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
    box-shadow: 0 0 20px 0px black inset;
}

body.dark div#tab-container {
    background-color: #323232 !important;
}

body.dark div#tab-container div[role="tab"].active {
    background-color: #323232 !important;
    color: white !important;
    box-shadow: var(--system-accent-color) 0 -2px inset !important;
}

/* Light */

body #editor {
    background-color: transparent;
    background: linear-gradient(to top, #DDDDDD22, #FFFFFF22), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeBlend mode='screen'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
    box-shadow: 0 0 20px 0px gray inset;
}

body div#tab-container {
    background-color: #e6e6e6 !important;
}

body div#tab-container div[role="tab"].active {
    background-color: #e6e6e6 !important;
    color: black !important;
    box-shadow: var(--system-accent-color) 0 -2px inset !important;
}

Also check out the corresponding discussion: Zettlr/Zettlr#2863

Interesting - just this afternoon I thought I should save my custom.css to a gist, so I have access to it for other machines. Working out selectors can be hard work! (So I find, anyway.)

My CSS file is short and will no doubt change, but can be found here if that's of any interest. It would be great to have a collection of these!