How can I preview PDFs with Google Chrome in dark mode?

The following snippet adds a div overlay to any browser tab currently displaying a PDF document.

1. Open up your browser's Dev tools then browser console.

2. Paste this JavaScript code in your browser console:

const overlay = document.createElement("div");

const css = `
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    mix-blend-mode: difference;
    z-index: 1;
`
overlay.setAttribute("style", css);

document.body.appendChild(overlay);

3. Hit Enter

Special thanks: https://www.reddit.com/r/chrome/comments/e3txhi/comment/fem1cto

You can use the Dark Reader Google Chrome extension and used the Filter+ mode. It will work on the online PDF files, but not at the local PDF files.

Hint from Hirbot Behnam:
If you want to make it work with local files (e.g. PDFs) too, go to chrome://extensions/ and click on Details button below the extension "Dark Reader" and from there, enable Allow access to file URLs.

If anyone still need this in 2024 and following up on this answer:

• Enable Allow access to file URLs for the Dark Reader extension.
• Click on the extension icon on the top right.
• Click on the Dark Reader extension.
• In the small Dark Reader window that just opened, click on the More tab.
• Click on the All settings button at the bottom.
• In the tab that just opened, click on Enable for PDF files.