Convert a Webpage to PDF While Preserving Dark Mode Styles

To keep a webpage’s dark palette in a PDF, open the browser’s print preview and enable its background graphics or colors option. If you control the page, add print-specific CSS and set print-color-adjust: exact on the elements whose colors matter. That property is a hint, not a guarantee: browser print settings and browser decisions can still change colors or omit backgrounds. MDN documents the property’s behavior and limits.

A dark browser interface and a dark webpage are separate things. The browser theme changes browser interface surfaces; the page’s own screen and print styles determine how its content is rendered. Changing Chrome’s theme alone does not ensure that a PDF will preserve the website’s dark palette. Chrome Help explains its dark theme setting.

1. Save a dark webpage as a PDF from the browser

1. Open the page you want to save, then open the browser’s print dialog or print preview.
2. Choose the browser’s PDF destination, such as Save to PDF.
3. Inspect the preview before saving. Check whether the dark background and text colors survived, and whether the text remains legible.
4. If backgrounds disappeared, enable the setting named something like Print backgrounds, Background graphics, or Print background colors. The exact wording and location depend on the browser. Firefox documents a Print backgrounds option under More settings when printing or saving to PDF. See Mozilla’s Firefox print instructions.
5. Save the PDF, then open it and check several pages or sections. The saved file is the result that matters; do not rely only on the page’s dark appearance in the tab.

Keeping a dark background can make a PDF larger and use more ink if someone prints it on paper. Consider the intended use: a screen-reading copy may benefit from the original palette, while a document meant for paper may be clearer with a light background and dark text. Browser print optimization may remove dense backgrounds or replace light text with dark text for readability or ink savings. The CSS Color Adjustment specification describes this browser discretion.

2. Add print CSS when you control the webpage

Webpages can have different screen and print layouts. Use @media print to define the version intended for printing and PDF output. Preserve the intentional color pairings, and hide interface elements that do not belong in the document. Then test the actual print output: CSS cannot force every browser or user setting to retain every color. See MDN’s printing guide.

/* Add this to your stylesheet. Adjust the selectors and colors for your page. */
@media print {
  /* Keep important dark surfaces and their foreground colors together. */
  html,
  body,
  .report,
  .report-card {
    background-color: #111827;
    color: #f9fafb;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  a {
    color: #93c5fd;
  }

  /* Remove controls that do not belong in the document. */
  nav,
  .toolbar,
  .cookie-banner,
  .print-hidden {
    display: none !important;
  }

  /* Avoid splitting compact content where possible. */
  pre,
  blockquote,
  .report-card {
    break-inside: avoid;
  }
}

@page {
  size: A4;
  margin: 16mm;
}

print-color-adjust is inherited, so applying it to a containing element can cover descendants. Prefer targeting the areas whose colors are important rather than blindly styling every element. The prefixed -webkit-print-color-adjust declaration is included for compatibility with WebKit-derived browser behavior; keep the standard property as well.

Choose a print design deliberately

• If the dark palette is part of the meaning or design, retain paired background and text colors and ask the browser to preserve them with print-color-adjust: exact.
• If the PDF is intended for paper, consider a print stylesheet that switches to a white background and dark text. That can improve legibility and reduce ink use.
• Do not keep light text while removing its dark background. A readable PDF requires adequate contrast in the final rendered output.
• Use print CSS to remove navigation, floating controls, and overlays, and to set page margins and sensible page breaks.

exact communicates that the colors and styles are intentional. It does not override user controls: browsers may still decide how to handle color and backgrounds, and the user’s print settings take priority. Treat it as best effort. See MDN’s usage notes and the W3C specification.

3. Debug print styles before saving

When you are developing the page, emulate print media in browser developer tools so you can see which rules apply before opening the print dialog. Chrome DevTools provides a rendering control for emulating CSS media features; its documentation is at Emulate CSS media features.

1. Open DevTools and locate the rendering or CSS media emulation controls.
2. Select print media emulation.
3. Inspect the page for missing backgrounds, low contrast, hidden content, awkward widths, and poor page breaks.
4. Adjust the @media print rules, then open print preview and verify the browser’s final PDF output.

Media emulation helps inspect print-specific CSS, but it is not the final PDF check. The browser’s print dialog can apply settings that affect colors and backgrounds. Always inspect the preview and resulting file.

4. Common problems and fixes

Symptom	Likely cause	What to do
The PDF has a white background	Background printing is disabled, or the browser optimized the output.	Enable the print background or graphics option. If you own the page, set print styles for the relevant surfaces and use print-color-adjust: exact; verify the result.
Text becomes dark but the background stays dark	The browser adjusted text colors, or a print rule changed one side of the color pairing.	Set foreground and background colors together in @media print. Check computed styles with print media emulation and inspect print preview.
Light text is hard to read or disappears	The background was removed while light foreground text remained.	Enable background printing, or deliberately define a high-contrast light print theme with dark text. Do not depend on a hint alone.
The preview is correct but the PDF differs	A setting or rendering step changed the final output.	Save again with the desired background setting, then open the PDF itself and inspect it. Try another browser’s print workflow if needed.
The browser theme is dark but the PDF is light	The browser interface theme does not define the page’s print colors.	Use print preview settings or author-side print CSS. A browser theme change is not a PDF color control.
Content is missing, clipped, or split awkwardly	The page’s print stylesheet may hide or constrain content, or it may lack print pagination rules.	Inspect print media styles, remove unnecessary fixed-height or overflow constraints, and use page-break controls such as break-inside: avoid selectively.

5. Reliability, performance, and file-size considerations

The built-in print-to-PDF path is direct and requires no separate conversion service. Its appearance depends on the page’s print CSS, browser implementation, and print-dialog options. For repeatable output, keep an author-controlled print stylesheet and verify the saved PDF in the browser versions and settings relevant to your readers.

Retaining large dark backgrounds or background images can increase file size, and a dark page printed physically can consume more ink. Removing backgrounds can also damage contrast when text colors were designed for those backgrounds. Choose and test a palette for the PDF’s actual use rather than optimizing only for the screen.

Or skip the browser setup

If you need a PDF capture without managing browser print settings, ScreenshotNeo is a website screenshot API and MCP server for developers. Its API can return a PDF, and its PDF options include paper size, margins, landscape orientation, and page ranges. Your page still needs suitable styles for the intended output, so inspect the resulting PDF when preserving a specific dark palette matters. See the ScreenshotNeo documentation.

One GET request can create a PDF:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -d format=pdf \
  -o page.pdf

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://stripe.com",
        "format": "pdf",
    },
    timeout=90,
)
r.raise_for_status()
open("page.pdf", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com',
  format: 'pdf',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`ScreenshotNeo returned ${res.status}`);
await Bun.write('page.pdf', res);

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, with response headers indicating the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. These features are available on every plan.

Sign up for ScreenshotNeo’s free 1,000 screenshots per month, with no card required.

FAQ

Does print-color-adjust: exact force dark backgrounds into a PDF?

No. It tells the browser the colors are intentional, but the user’s print controls take priority and browsers retain discretion.

Will enabling dark mode in my browser preserve the website’s dark PDF?

No. Browser interface theme and webpage print styling are separate. Use the print background setting or author-side print CSS.

Should every PDF keep the webpage’s dark theme?

No. For screen reading, it may be appropriate. For paper, a light background and dark text may be more readable and use less ink. Choose based on the document’s intended use.

What should I check before sharing the PDF?

Open the saved file and check text contrast, missing content, page breaks, backgrounds, and any images or tables that matter. Previewing alone is not enough.