Introduction

Has years of staring, in a dimly lit room, at a dark mode terminal or text editor made you no longer accustomed to the blinding white pages of most applications? While many programs, such as email readers, come with a good native dark mode, some of the most common file formats including HTML web pages and PDFs are usually displayed using their default white background color.

In this blog post, we discuss methods of viewing these file formats with an appearance that is more pleasant on the eye.

Browser

Web Pages

For the browser, there is a neat extension called Dark Reader which dynamically modifies the CSS of the webpage in order to render it in dark mode. The extension is available on both Firefox and Chromium-based web browsers. It also comes with a slew of customization options, ranging from selectively disabling the extension on certain web pages that you would rather render in their native appearance, to custom filters, which determine how the CSS is modified.

Below, you can find two examples of the extension in action. It works both on static web pages, such as Wikipedia, and dynamic ones like Google Maps.

PDFs

Note that web browsers often block extensions from functioning on protected URLs, such as configuration pages and local files (e.g., PDFs). Therefore, if you use your web browser as your PDF viewer, you will not be able to rely on Dark Reader for providing a pleasant reading experience.

There is, however, a workaround for Firefox users. Create a custom bookmark with a URL given by the following javascript code (adapted from this StackOverflow post):

javascript:(function(){var el = typeof viewer !== 'undefined' ? viewer : document.body; el.style.filter = 'invert(1) contrast(75%)';})()

While viewing a PDF in Firefox, clicking on this bookmark will invert the colors of the PDF and decrease the contrast such that it is lighter on the eyes – effectively performing a poor man’s dark mode.

PDF viewer

For a better dark mode experience with PDFs, I would recommend using a dedicated PDF viewer which has a native dark mode option. If you are comfortable with Vim motions, there are two great options, the well-established Zathura program and the newer feature-rich Sioyek reader, which provide a dark mode out of the box.

Warning

These PDF readers heavily rely on keyboard shortcuts, in particular Vim motions, and might not be appropriate for novices.

While I am content with Sioyek’s default dark mode, the one from Zathura simply inverts the colors which makes for an aggressive appearance since the white background is turned into pitch black. Therefore, I prefer setting the colors to a more tamed dark blue color (similar to the Nord colorscheme). This can be achieved by adding the following configuration to the Zathura config file:

set default-bg          "#282a36" # Background
set default-fg          "#f8f8f2" # Foreground
set recolor-lightcolor  "#282a36" # Background
set recolor-darkcolor   "#f8f8f2" # Foreground

Zotero

If you spend a lot of time reading academic publications using the Zotero reference manager, you will be happy to hear that it can also be configured with dark mode functionality. The recent release of Zotero 7 now incorporates native support for dark mode. However, similar to the default dark mode of Zathura, it essentially just inverts the colors leading to a harsh visual experience. Thankfully, there is a plugin called zotero-night (compatible with Zotero 6), which provides a much more muted colorscheme and is, therefore, my preferred method of choice.