Some people prefer the distraction free mode to be really distraction-free. You can test it out by simply ! Please refer to the Unsplash Source API reference for more options (such as using an image of the day). It uses the Source API, which will simply spit out a different image every time the URL is visited. The images are taken from, a nice site with free photos.
With the following code, you can make your editor have a different background image everytime you start it. (Lato is the default, so you probably don't want to put it there.) Zettlr already ships a serif font, a sans-serif font and a monospace font! To use the bundled fonts, you can use Crimson for a modern serif font or Liberation Mono for a nice looking monospace font. The placeholder will make sure that even if your font cannot be found, an equivalent font will be used.
#ZETTLR THEMES FULL#
Replace your-font-name with the full name of the font you want to use for Zettlr.
#ZETTLR THEMES CODE#
In case you do not like the default font delivered with Zettlr, or need to change it, simply paste the following code snippet into the custom CSS editor. So to make sure a certain rule only applies while the app is in dark mode, make sure to prefix it with body.dark!Īt the bottom of this page you may find a full class and ID reference so that you don't have to poke around in the app forever! (I already apologise, for it is only a simple dump generated from Zettlr's precompiled CSS files.) dark if the app is currently in dark mode.
#ZETTLR THEMES INSTALL#
You can find the data directory of your own system by looking at the paths provided in the install documentation.Įverything is always namespaced to the, which has a class. In case you made a mistake, don't worry: Simply remove the custom.css-file from the data directory of Zettlr. Playing around with the geometry may be fun, but it may yield completely random behaviour, as some parts of the app depend upon the correct sizes of elements. The styles of Zettlr are divided into both geometry and the actual theme, so you may want to stick with only changing the design of elements without changing any geometry. Therefore, you can use classes for literally anything. It follows the generally-acknowledged wisdom not to make use of style-tags to directly define properties. Zettlr comes with a lot of predefined classes and IDs. If you don't want to write CSS for yourself and are only looking to change the font, head over to the next section! At the end of the page you may find a complete class reference.
If you are unfamiliar with CSS, but don't want to simply copy & paste the guides on this page, you may choose to follow a short ! There are many on the internet, so a quick Google search can also provide you with video tutorials, if you prefer those!īelow you can first find a general introduction in writing CSS, before I will list some examples that you can easily copy & paste to adapt your app to look differently. You can find the Custom CSS editor under Zettlr->Custom CSS... (macOS) or under File->Custom CSS… (Windows and Linux)