Chrome/Brave PDF Viewer Dark Mode Toggle

togglePDFDarkMode.js

// When using in-browser PDF viewer, you can inspect it and run this in the console
// It's using CSS Blending to invert the colors of the PDF 
function togglePDFDarkMode() {
  var cover = document.createElement("div");
  let inversion = `
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    mix-blend-mode: difference;
    z-index: 1;
    `
  if (document.body.contains(cover)) {
    document.body.removeChild(cover);
  } else {
    cover.setAttribute("style", inversion);
    document.body.appendChild(cover);
  }
}
togglePDFDarkMode();

Do you know how I can turn this script into a bookmarklet in Brave?

Do you know how I can turn this script into a bookmarklet in Brave?

https://caiorss.github.io/bookmarklet-maker/

Thanks for this snippet! I found out that using background-color: #dddddd is better for the eyes. The whites are not (255, 255, 255) and the blacks are not (0, 0, 0) which makes it a bit easier on the eyes. You'll thank me later. 😉

Instead of bookmarklet, you can also just use tampermonkey and made a custom button

// ==UserScript==
// @name         PDF Dark Mode with Button (Default On)
// @namespace    http://tampermonkey.net/
// @version      2025-07-30
// @description  Adds a button to toggle dark mode overlay on PDFs; enabled by default on load (file:// and ArXiv supported)
// @author       You
// @match        file:///*
// @match        *://arxiv.org/pdf/*
// @grant        none
// ==/UserScript==

(function () {
  function togglePDFDarkMode() {
    const existing = document.getElementById("pdf-darkmode-overlay");
    if (existing) {
      existing.remove();
      return;
    }

    const cover = document.createElement("div");
    cover.id = "pdf-darkmode-overlay";
    cover.setAttribute("style", `
      position: fixed;
      pointer-events: none;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: #dddddd;
      mix-blend-mode: difference;
      z-index: 1;
    `);
    document.body.appendChild(cover);
  }

  function addToggleButton() {
    const btn = document.createElement("button");
    btn.innerText = "🌓 Toggle Dark";
    btn.style.position = "fixed";
    btn.style.bottom = "20px";
    btn.style.right = "20px";
    btn.style.padding = "8px 12px";
    btn.style.zIndex = "10000";
    btn.style.backgroundColor = "#333";
    btn.style.color = "white";
    btn.style.border = "none";
    btn.style.borderRadius = "5px";
    btn.style.cursor = "pointer";
    btn.style.fontSize = "14px";

    btn.addEventListener("click", togglePDFDarkMode);
    document.body.appendChild(btn);
  }

  function init() {
    togglePDFDarkMode(); // turn it on by default
    addToggleButton();   // show button
  }

  // Wait until body exists
  function waitForBody() {
    if (document.body) {
      init();
    } else {
      setTimeout(waitForBody, 50);
    }
  }

  waitForBody();
})();