Welcome to the new Zettlr Discussion forum! It's still a bit empty, but hopefully with your support it won't stay this way! Please register and start discussions!

We have three categories (as of now): ZETTELKASTEN for discussions circling around Zettlr's implementation of Zettelkasten systems, FEATURES for discussions around the functionality of the app (including discussions on how to improve them) and GENERAL for everything else.

Think we need a new category? Just message us!

Paperstyle CSS

Hello everybody,

as I'm playing a lot with the Custom CSS feature, sometimes to test out new designs, and sometimes because I also tend to use a somewhat different appearance than the default one, I decided to create this forum so that you can share your own designs, in case somebody else wants to simply use something by somebody else without digging into CSS. And I'm sure there are a lot of pros out there who would like to receive some credit for their beautiful work!

It's easy. Simply copy your code in here (click on the pilcrow sign left to the textarea when writing a new post and select "code") and also add a screenshot!

I'll start with something that renders Zettlr "paperlike":

/* Paperstyle custom CSS */
/* Add Monospace font */
body.darwin { font-family: 'Menlo Regular', monospace; }
#editor.fullscreen, .CodeMirror-fullscreen { top: 0px; }
/* Set the surrounding background color */
body #editor { background-color: #333; } /* Light mode */
body.dark #editor { background-color: black; } /* Dark mode */
/* Set the background colour of the writing area (light mode) */
body #editor .CodeMirror-sizer, body #editor .CodeMirror-gutter {
    background-color: white;
    height: 100%; /* Necessary for shorter texts */
/* Here for dark mode */
body.dark #editor .CodeMirror-sizer, body.dark #editor .CodeMirror-gutter {
    background-color: #333;

The Base Theme for this is "Berlin" (the theme feature comes in Zettlr version 1.3!)

Light Mode:

Dark Mode:

Sign In or Register to comment.