Designing Beautiful Dark Mode PDFs in Markdown

Historically, documents have been designed with a light background and dark text—mirroring ink on physical paper. However, as the majority of document reading has shifted to screens, dark mode has grown in popularity. Dark documents are easier on the eyes, reduce glare, and look modern and sleek when sharing technical briefs, digital magazines, or slide decks.

In this guide, we’ll explain how to design a dark mode markdown pdf using custom CSS stylesheets. We’ll discuss choosing soft contrast colors, styling text and borders, and configuring fallbacks for printing.

The Design Philosophy of Dark Mode PDFs

Creating a good dark theme is not as simple as swapping white for black and black for white. High-contrast white-on-black text can cause “halation,” a visual effect where the text appears to glow, causing eye strain.

To prevent this, follow these design rules:

1. Use Softer Backgrounds: Avoid pure black (#000000). Instead, choose deep grays, slates, or midnight blues (e.g., #121212, #1e1e2e, or #0f172a).
2. Soft White Text: Avoid pure white (#ffffff). Use off-white or light gray (e.g., #e2e8f0 or #cdd6f4) to lower brightness.
3. Vibrant Accent Colors: Use bright neon or pastel accents for headings and links so they remain readable against the dark background.

Setting Up Your Dark Mode CSS Template

Here is a ready-to-use CSS template for compiling your Markdown files into beautiful dark mode PDFs:

body {
    background-color: #1e1e2e; /* Midnight Lavender/Blue */
    color: #cdd6f4;            /* Off-white text */
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.6;
    padding: 2cm;
}

h1, h2, h3 {
    color: #89b4fa;            /* Light Pastel Blue for headers */
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

a {
    color: #f5c2e7;            /* Soft Pink/Magenta for links */
    text-decoration: none;
    border-bottom: 1px dotted #f5c2e7;
}

blockquote {
    border-left: 4px solid #f5c2e7;
    background-color: #313244;  /* Slightly lighter background for blockquotes */
    color: #bac2de;
    padding: 10px 15px;
    margin: 1.5em 0;
    border-radius: 0 4px 4px 0;
}

Styling Syntax Highlighting and Code Blocks

Technical guides written in Markdown are packed with code blocks. In dark mode, code blocks should match the theme’s aesthetic. You can use a dark theme container style to host your syntax highlighted code:

pre {
    background-color: #11111b; /* Charcoal/Black background */
    border: 1px solid #313244;
    border-radius: 6px;
    padding: 15px;
    overflow-x: auto;
}

code {
    font-family: 'Fira Code', monospace;
    font-size: 0.95em;
    color: #f5e0dc;            /* Soft cream color for inline code */
}

The Print Problem: Saving Ink

While dark mode is amazing for digital screens, it is a disaster for physical printing. If a reader decides to print your dark mode PDF, it will exhaust their black printer ink cartridges and warp the paper.

To solve this, use a print media query that automatically inverts your colors back to light mode whenever the document is sent to a physical printer:

@media print {
    body {
        background-color: #ffffff !important;
        color: #11111b !important;
    }
    
    h1, h2, h3 {
        color: #1e1e2e !important;
    }
    
    pre {
        background-color: #f3f4f6 !important;
        border: 1px solid #d1d5db !important;
    }
    
    code {
        color: #000000 !important;
    }
}

This hybrid approach gives you the best of both worlds: a beautiful dark mode layout for digital readers, and an ink-saving light mode layout for print.

Try It Yourself

Ready to see how gorgeous a dark mode PDF looks? Head over to our Markdown to PDF Editor. You can write your Markdown, apply the CSS styles provided above, and instantly download a dark themed digital publication.