The Markdown preview pane in MarkNode can be styled with different themes. Choose a built-in look, let the preview follow your application theme automatically, or write your own CSS to match the venue where your documents will be published.
Following the Application Theme
By default the preview is set to Match app theme: it uses the built-in style that pairs with your current application theme, so switching from Paper to Midnight (or any other theme) recolors the preview to match in one action. You do not have to pick a preview theme at all unless you want a look that differs from the rest of the app.
Built-in Themes
MarkNode ships with a set of built-in preview themes available to every user. They are read-only and cannot be modified, but you can always copy one as a starting point for a custom theme. Alongside the styles that pair with each application theme (Paper, Midnight, Sepia, Nord, Solarized Dark, High Contrast), there are venue- and mood-specific looks such as:
- GitHub Light and GitHub Dark — GitHub-style rendering for documentation
- Solarized Light and Solarized Dark — the Solarized palettes
- Serif — a centered serif column for long-form prose
- Compact — a tighter layout for dense reference material
- Academic, Newsprint, Dracula, and more
The built-in themes derive their base background, text, link, and border colors from your active application theme, so they look right in light and dark without you re-picking anything. (There is also an internal Default style that backs Match app theme; you pick Match app theme in the menu rather than Default directly.)
To switch themes, click the preview style button in the preview pane’s header, or right-click anywhere in the preview and use the style list. Pick Match app theme to follow the application theme again, or pick any specific style to pin it. The change applies immediately to every preview surface — the docked preview alongside the editor and any preview windows you have undocked — and is remembered across sessions.
Creating a Custom Theme
From the preview style menu, choose New style from this… to create a custom theme based on the one currently active:
- Enter a name for your new theme. Names cannot match a built-in name.
- The CSS editor opens with the source CSS pre-filled — edit it to taste.
As you type, the preview re-renders live. The CSS is held in memory until you save, so you can experiment freely; if you change your mind, close the editor to discard your edits.
To edit a custom theme you already made, select it and choose Edit current style… from the same menu.
Tip: Light syntax errors (an unbalanced brace, a stray quote) are handled gracefully — the last valid version of your stylesheet stays applied until the source becomes valid again. There is no flicker through broken states while you are mid-edit.
Saving and Sharing
When you save a custom theme, it is stored in your global theme library so it is available across every project on this machine. You can also tick Save a copy in the current project to write it into the project, which means the theme travels with the project. If you check the project into Git, every collaborator who clones the repository sees the same preview.
When you open a project that contains a custom preview theme you do not already have, that theme appears in your style list for as long as the project is open.
What Custom CSS Can Style
Custom CSS is scoped to the preview container (.markdown-preview), so it does not affect the editor, sidebar, or any other part of MarkNode. You can style:
- Body fonts and sizes
- Headings, lists, blockquotes, and tables
- Code blocks, inline code, and syntax highlighting colours
- Spacing, padding, and the maximum content width
If you want your custom theme to adapt to light and dark automatically the way the built-ins do, start it by duplicating a built-in theme — your copy inherits that theme-aware base and you can adjust from there.
Heavy DOM restructuring is not possible because the CSS only adjusts visual presentation, not the underlying HTML.
Deleting a Custom Theme
Select a custom theme and use the delete action in the style menu. A confirmation appears first. If the theme you delete is the active one, MarkNode falls back to the default built-in. Built-in themes have no delete action and cannot be removed.