We switched to a manual approval system for registration on this forum, as this makes it easier to keep bots out of the forum. We'll approve everybody who doesn't look like a bot!

Custom theme based on Frankfurt dark mode theme

edited July 29 in Customisation

Preview

Here's the theme I made with minor changes based on Frankfurt dark theme. To reduce the contrast and make it a little easier for longer work. I also made some changes to the preview pane.
Since I prefer the editor to format the text (without the Makrdown characters) while writing, I set all rendering options in the settings, and for the bold and italic text in the CSS code set to markdown characters are not displayed. This is my temporary solution while the WYSIWYG modules are not included in Zettlr.
If this does not suit you, just wipe the line of code - display: none.

/* Enter your custom CSS here */
body.dark #editor {
    background-color: #21212b;
}

body.dark .cm-quote, body.dark .cm-link, body.dark .cm-strong, body.dark .cm-em {
    color: #94c7ea;
}

body.dark #preview {
    background-color: #353546;
    color: white;
    box-shadow: inset -14px 2px 54px -23px rgba(0,0,0,0.5);
    margin-top: 1px;
    font-size: 1em;
}

body.dark #preview ul .selected {
    background-color: #21212b;
    border-left: 5px solid #df5d33;
    font-weight: bold;
    color: #df5d33;
}

body #preview ul li {
    background-color: inherit;
    box-shadow: inset -14px 2px 54px -23px rgba(0,0,0,0.5);
    border-top-color: #444;
    border-bottom-color: #444;
    height: 60px;
}

body.dark #preview ul li.directory, body.dark #preview ul li.virtual-directory {
    background-color: #030304;
    color: white;
    font-weight: bold;
}

body #preview ul li p.file-meta .date,
body #preview ul li p.file-meta .id,
body #preview ul li p.file-meta .tags
{
    color: #ffffff !important;
    background-color: #000 !important;
    box-shadow: 0px 0px 70px -15px rgba(255,255,255,0.55) !important;
}

#preview ul li p.filename {
    font-weight: 500;
}

.CodeMirror .cm-escape-char,
.CodeMirror .cm-formatting-code,
.CodeMirror .cm-formatting-code-block,
.CodeMirror .cm-formatting-em,
.CodeMirror .cm-formatting-quote,
.CodeMirror .cm-formatting-strong {
    opacity: .3;
    display: none;
}

body.dark #preview ul li p.file-meta .directories {
  background-color: #b75a3d;
}
.CodeMirror .CodeMirror-sizer {
    margin-left: 30px;
    border-right-width: 30px;
    padding-right: 30px;
}

Comments

  • Thanks for sharing your custom theme! I really like the inset box shadow of the sidebar! I just edited your post to include the CSS directly (makes it easier for people to just copy & paste it into their custom CSS box!)

    Thanks again!

  • @hendrik said:
    Thanks for sharing your custom theme! I really like the inset box shadow of the sidebar! I just edited your post to include the CSS directly (makes it easier for people to just copy & paste it into their custom CSS box!)

    Thanks again!

    Thanks, when I make a few more small changes, I'll post here. I also want to create a slightly more neutral theme with a lighter gray background. Thanks for the encouragement :)

  • edited July 31

    Another version with minor changes to the look of preview panel and search results.
    If you want to see a larger view, open in a new tab.

    Theme:

    /* Enter your custom CSS here */
    body.dark #editor {
    background-color: #21212b;
    }
    body.dark .cm-zkn-tag, body.dark .cm-zkn-id, body.dark .cm-zkn-link {
    color: #aeafdc;
    }
    body.dark .cm-quote, body.dark .cm-link, body.dark .cm-strong, body.dark .cm-em {
    color: #94c7ea;
    }
    body.dark #preview {
    background-color: #353546;
    color: #fff;
    box-shadow: inset -14px 2px 54px -23px rgba(0,0,0,0.5);
    margin-top: 1px;
    font-size: 1em;
    }
    body.dark #preview ul .selected {
    background-color: #21212b !important;
    border-left: 5px solid #df5d33;
    font-weight: bold;
    color: #df5d33 #fff !important;
    }
    body #preview ul li {
    background-color: #353546 !important;
    box-shadow: inset -14px 2px 54px -23px rgba(0,0,0,0.5);
    border-top-color: #444;
    border-bottom-color: #444;
    height: 60px;
    color: #fff !important;
    }
    body.dark #preview ul li.directory, body.dark #preview ul li.virtual-directory {
    background-color: #030304;
    color: white;
    font-weight: bold;
    }
    body #preview ul li p.file-meta .date,
    body #preview ul li p.file-meta .id,
    body #preview ul li p.file-meta .tags {
    color: #fff !important;
    background-color: #000 !important;
    box-shadow: 0px 0px 70px -15px rgba(255,255,255,0.55) !important;
    }
    #preview ul li p.filename {
    font-weight: 500;
    }
    .file.file-meta.ui-draggable.ui-draggable-handle p.filename {
    color: #fff !important;
    }
    .CodeMirror .cm-escape-char,
    .CodeMirror .cm-formatting-code,
    .CodeMirror .cm-formatting-code-block,
    .CodeMirror .cm-formatting-em,
    .CodeMirror .cm-formatting-quote,
    .CodeMirror .cm-formatting-strong {
    opacity: .3;
    display: none;
    }
    body.dark #preview ul li p.file-meta .directories {
    background-color: #b75a3d;
    }
    .CodeMirror .CodeMirror-sizer {
    margin-left: 30px;
    border-right-width: 30px;
    padding-right: 30px;
    }

  • I just noticed how you did selected files, and damn, I think I'm gonna borrow this concept for the default themes in 1.4, it's definitely such a good idea! :)

  • I haven't touched the code in a while, and I do this in breaks when I'm tired of reading literature in my area, but I find it refreshing :)
    I'll do another theme, and if you like anything to take into your concept, I'll be glad. If I can be of any help in forming new designs, I am interested in getting involved. I think it's always a good thing that for this type of application there is a greater selection of design themes.

  • noob question

    Can you please help me reduce the font size in this theme. I really like this. I am however not sure what custom css to write.

  • Depends where you'd like to reduce the font-size? The overall font-size can be reduced directly on the body-element. For the editor, you'd want to set the font-size on the #CodeMirror-element. Sometimes you'll need to take scoping into account (Any rule that contains #editor #CodeMirror will override a rule that only contains #CodeMirror). The easiest way is to open op the developer console, inspect the element where you want to reduce the font size, and then you'll have the exact rule you need to override it!

  • edited November 2

    Another variation of this theme, with a different style for tags and changed file icons.
    I apologize for the messy code :) but you should get the look shown above. The font size for head tags should probably be reduced, but you can easily adjust it.

    Theme:

Sign In or Register to comment.