I had only one regret when weighing up whether to leave Obsidian. It is a community theme called Obsidianite. Well now I have my own version of it. They aren't the exact colors, but they calm my eyes on long sessions.
I'm really enjoying Zettlr, and the fact it stays so close to CommonMark, makes it feel so natural when I export to UTF-8 text. I would love to see what variations you make from it. Hopefully this is helpful to the community.
Here it is:
/* My Zettlr CSS. v1.0 Created: 28/01/2026
================================
Core editor background & text
================================ */
.cm-editor {
background-color: #0d0f14 !important;
}
.cm-content {
color: #d7dae0 !important;
caret-color: #ffffff;
}
.cm-activeLine {
background-color: rgba(255, 255, 255, 0.035) !important;
}
.cm-selectionBackground {
background-color: rgba(90, 120, 160, 0.35) !important;
}
/* ================================
Headings H1–H6
================================ */
.cm-header-1 {
color: #4ec9b0 !important;
font-size: 1.8em;
font-weight: 700;
}
.cm-header-2 {
color: #569cd6 !important;
font-size: 1.5em;
font-weight: 600;
}
.cm-header-3 {
color: #6a9955 !important;
font-size: 1.3em;
font-weight: 600;
}
.cm-header-4 {
color: #9cdcfe !important;
font-size: 1.15em;
font-weight: 600;
}
.cm-header-5 {
color: #c586c0 !important;
font-size: 1.05em;
font-weight: 500;
}
.cm-header-6 {
color: #dcdcaa !important;
font-size: 1em;
font-weight: 500;
}
/* ================================
Emphasis & inline formatting
================================ */
.cm-strong {
color: #ffffff !important;
font-weight: 700;
}
.cm-em {
color: #dcdcaa !important;
font-style: italic;
}
/* ================================
Links
================================ */
.cm-link,
.cm-url {
color: #82aaff !important;
text-decoration: underline;
}
/* ================================
Inline code
================================ */
.cm-inline-code {
background-color: #161821 !important;
color: #ce9178 !important;
padding: 0.1em 0.3em;
border-radius: 4px;
font-family: monospace;
}
/* ================================
Code blocks
================================ */
.cm-codeBlock {
background-color: #111318 !important;
color: #b5cea8 !important;
border-left: 4px solid #4ec9b0;
padding: 0.6em 0.8em;
}
/* ================================
Blockquotes
================================ */
.cm-quote {
color: #b0b0b0 !important;
font-style: italic;
border-left: 4px solid #555555;
padding-left: 0.8em;
}
/* ================================
Lists
================================ */
.cm-list {
color: #e6e6e6 !important;
}
/* ================================
Horizontal rules
================================ */
.cm-hr {
border-top: 1px solid #444444 !important;
}
/* ================================
Callout markers
================================ */
.cm-line:has-text("NOTE:") {
color: #4fc1ff;
font-weight: 600;
}
.cm-line:has-text("TIP:") {
color: #c5e478;
font-weight: 600;
}
.cm-line:has-text("WARNING:") {
color: #f44747;
font-weight: 700;
}
.cm-line:has-text("IMPORTANT:") {
color: #ffcc66;
font-weight: 700;
}
(Note from moderators: Edited this post to use a proper code block for the CSS)
