Darkmode Overleaf's PDF viewer using userscript
Overleaf does not support dark mode in its pdf viewer. The quickest way is to use browser extension (like the Dark Reader) that facilitate the dark mode. Instead of that, you can use any userscript manager, which is also a browser extension but makes you a power-user. For example, Greasemonkey, Userscripts, Tampermonkey, or Violentmonkey, or so on. If you are not familiar with any of these managers, you can find tutorial on how to use it by searching on the internet.
Here is the script that can automatically turn on dark mode for Overleaf’s pdf viewer:
// ==UserScript==
// @name Darkmode Overleaf's PDF viewer
// @description Turn on dark mode for Overleaf's pdf viewer.
// @namespace overleaf.arxiv.darkreader
// @author Damodar Rajbhandari
// @version 05.11.2024
// @match *://*.overleaf.com/*
// @match *://*.arxiv.org/*
// @match *://*.inspirehep.net/*
// @include *.pdf
// @exclude *://pdf.physicslog.com/web/viewer.html?file=*
// @run-at document-start
// @require https://unpkg.com/darkreader@latest/darkreader.js
// @grant none
// ==/UserScript==
(function() {
// Bonus feature 1. Based on the api from https://github.com/darkreader/darkreader
function enableDarkReader() {
DarkReader.setFetchMethod(window.fetch);
DarkReader.enable({
brightness: 100,
contrast: 90,
sepia: 10
}, {
invert: [".container"] // Inverts .container class in the https://arxiv.org/search/* . See more options at https://github.com/darkreader/darkreader/blob/main/index.d.ts
});
}
// Main function to turn dark mode for Overleaf's PDF viewer
function injectDarkModePDF() {
const style = document.createElement('style');
style.textContent = `
.pdfViewer, embed[type="application/pdf"], object[type="application/pdf"], iframe[src*=".pdf"], iframe.pdf-viewer {
filter: invert(64%) contrast(228%) brightness(80%) hue-rotate(180deg) !important;
}
`;
document.head.appendChild(style);
}
// Bonus feature 2. It changes the arXiv PDF's link so that the PDF opens in my version of Mozilla's PDF.js viewer.
// @note: You can annotate arXiv PDFs with the PDF.js viewer, but don't forget to download the PDF if you want to save the annotations.
function changearXivPDFURL() {
var isMobile = /Mobi|Android|iPhone|iPad/i.test(navigator.userAgent);
var selector = isMobile ? 'a.mobile-submission-download' : 'a.download-pdf'
var linkElement = document.querySelector(selector);
if (linkElement) {
var link = linkElement.href;
linkElement.href = "https://pdf.physicslog.com/web/viewer.html?file="+link;
}
}
// Call the functions
injectDarkModePDF();
enableDarkReader(); // Bonus feature 1. Optional
changearXivPDFURL(); // Bonus feature 2. Optional
})();
Now, you can either copy and paste directly into your userscript manager, or save this script as darkmode-overleaf.user.js and load it in your userscript manager. You may notice there are two bonus features in the userscript. The first is to enable the dark mode for arXiv, iNSPIRE-HEP, and Overleaf. The second is to change the arXiv’s “View PDF” link so that the PDF opens in my version of Mozilla’s PDF.js viewer (pdf.physicslog.com).
You can turn off these features by commenting out the respective functions. But I recommend you to keep them as they are 😉 You can also use @match to turn on the dark mode for other websites.
I hope Overleaf will add this feature in the future. But, until then, you can follow this workaround.
Cheers 😀
You may also like to hide the Overleaf’s submit button at the toolbar. You can find my userscript at my post.
Any feedback?
If you guys have some questions, comments, or suggestions then, please don't hesitate to shot me an email at [firstname][AT]physicslog.com or comment below.
Liked this post?
If you find this post helpful and want to show your appreciation, I would be grateful for a donation to arXiv , which supports open science and benefits the global scientific community.
Want to share this post?
Written by Damodar Rajbhandari, who is working on a PhD in the Mathematical Physics at the School of Mathematics & Statistics, University of Melbourne, Australia.
