[[Zettlr HowTo]] #005: Custom CSS

Zettlr’s custom CSS feature lets users override the app’s built-in styling—down to layout, typography, colors, and borders—by injecting their own CSS rules into the editor. Because Zettlr runs on Electron (Chrome wrapped in a binary), its appearance is governed by CSS, meaning a user with basic CSS familiarity can reshape the interface far beyond the five shipped themes. The payoff is a fully personalized writing workspace, but the power also comes with risk: poorly targeted rules can make the UI unreadable or inconsistent.

The workflow starts with choosing a starting theme (the app ships with five themes, including Bordeaux). Themes control key visual defaults such as highlighting color and fonts, while a shared “geometry” CSS file handles element positioning and sizing. Zettlr then loads a theme-specific CSS file that adjusts colors, borders, and border radiuses. Finally, the user’s custom CSS file loads last, and CSS’s cascade rules mean later declarations override earlier ones—so custom CSS can supersede Zettlr’s own styling.

Before editing CSS, two prerequisites matter: having a clear idea of what to change and having at least some comfort with CSS. Zettlr also requires enabling debug mode to access developer tools. Users go to Preferences → Advanced, turn on debug mode, save, and then a new “develop” menu appears. Inside developer tools, the Elements tab is the key. It shows the DOM structure and the CSS rules currently affecting selected elements.

From there, users can “inspect” the interface directly: a selection tool lets them hover over UI components and click to lock onto the corresponding element in the Elements panel. This is especially important because styling often comes from wrapper elements rather than the inner content. For example, heading sizes are determined by CSS rules tied to CodeMirror wrapper classes, not just the visible heading text. Once the relevant selector is identified, users can adjust properties like font-size (using units such as em) and immediately see the effect.

To implement changes safely, the transcript recommends experimenting in developer tools first, then copying the CSS selector and the customized declarations into Zettlr’s Custom CSS settings dialog. After saving, Zettlr reloads the custom CSS instantly, and overridden rules appear “struck out” in the developer tools—confirming the cascade is working as intended.

Finally, the customization is theme-sensitive: switching themes can make the same custom CSS look completely different because the underlying theme CSS changes the baseline. Users are also encouraged to share standout customizations, with developers likely to credit and publicly highlight community CSS creations on forums and social platforms.