We are currently planning to migrate to a different platform for the forum. We will announce this fact both here and on Twitter, once we have settled on a solution.

Optimized Zettlr Theme

edited February 16 in Customisation

Hi all,

I wanted to share my take on the Zettlr theme. It uses the default System Font to make it blend in more with my system. I couldn't test this on Windows so no idea how it will look like with Windows default system font. I've tried to figure out if I could load Google Fonts but didn't succeed.

I currently don't have the time to put more work in it so I share it in case anyone wants to adapt it more to his/hers liking.

One important change to me was less space between the note title and meta information. I've wondered if this space is used in Zettlr for something that I haven't seen yet but tags are placed after meta so I couldn't discover what. It's currently a lot of white space to my liking.

Let me know what you think of it.

The custom code is like follows (just copy/paste it in the 'Custom CSS…'.

:root {
  --c-primary: #19b27e;
  --c-primary-shade: #19b27e;
  --c-secondary: var(--blue-0);
  --c-secondary-shade: var(--blue-1);
  --bg-primary: white;
  --bg-directories: #2e3539;
  --c-project: var(--red-0);
  --c-project-dark: #f36262;
  --bg-preview: #efefef;

/* Use default System font (only tested on macOS) */
body {
  font-family: system-ui !important;

/* Changes to document tabs: smaller font and icon size */
#document-tabs {
  font-size: .8rem;}

#document-tabs .document .close {
    right: 2px;
    top: 2px;
    width: 20px;
    height: 20px;

clr-icon {
    height: 14px;
    width: 15px;

/* Giving 'Workspaces' some more space */
body #file-tree #directories-dirs-header, #file-tree #directories-files-header {
    border-bottom: 1px solid var(--grey-1);
    color: var(--grey-2);
    font-size: 0.72em;
    padding-top: 5px;
    height: 2.55em;

/* Changes to File Tree */
body #file-tree {
    font-size: 0.8em !important;
    color: #eeeeee;
    box-shadow: none;

body #file-tree .filename {
    padding: 0.15em 0.4em;
    line-height: 1.7em;
    margin: 0px 0px;

body #file-tree div.list-item:hover {
    background-color: #434E53;

/* Changes to File List */
body #file-list  div.list-item.directory {
  font-weight: 600 !important;

body #file-list {
    font-size: 0.9em !important;
    box-shadow: none;

body #file-list div.list-item {
    line-height: 10px;
    position: relative;

body.dark #file-list div.list-item {
    border-bottom: 1px solid var(--grey-5);
    border-left: 5px solid transparent;

body #file-list div.list-item.file:hover, body #file-list div.list-item.code:hover {
    background-color: var(--grey-1) !important;

#file-list div.list-item div.meta .date, #file-list div.list-item div.meta .id, #file-list div.list-item div.meta .tags, #file-list div.list-item div.meta .code-indicator, #file-list div.list-item div.meta .directories, #file-list div.list-item div.meta .files {
    font-size: 75%;
    border-radius: 4px;
    padding: 2px 0px;
    margin-right: 4px;

body #file-list div.list-item p.filename {
    line-height: 30px;
    margin-top: 4px;

body #file-list div.list-item div.meta {
    white-space: nowrap;
    height: 26px;
    line-height: inherit;

body #file-list div.list-item.selected {
    background-color: #ffffff;
    border-left: 5px solid var(--c-primary);

/* Directory Headers color */
body #file-list div.list-item.directory {
    background-color: #dbeae5 !important;
    transition: 0.2s background-color ease;
    color: var(--c-primary);

body.dark #file-list div.list-item.directory {
    background-color: #26322e !important;
    transition: 0.2s background-color ease;
    color: var(--c-primary);

/* Less padding around Filter field */
body #file-list #file-manager-filter {
    padding: 2px;

/* Top and left white margin of Editor*/
#editor .CodeMirror {
    margin-left: 30px;

/* Smaller scrollbar */
::-webkit-scrollbar {
    width: 6px;


  • Thank you so much for posting this! I've been looking for a more compact layout forever and this is really well done!!

  • Much appreciated!

  • I like the less space between file title and meta information, and yes, I wanted to do that for quite some time now, but yes, the space is just superfluous that the default theme has right now – will be better in Zettlr 2.0! Thank you for posting!

  • Thanks for the positive feedback all.

    And great to read that you like the less space Hendrik. Looking forward to Zettlr 2.0.


Sign In or Register to comment.