How to Preview PDFs in Chrome's dark mode? [3 Ways]

👤 Diwas Poudel 🕒 16 Aug 2022 📁 TECH

One of the popular display settings in chrome is called "dark mode," and it makes the content on the screen, including text, photographs, and other things, appear against a black background.It is better for your eyes and it increases readability by minimizing the light emitted by the device screen which has minimum color contrast ratios. It is known by a variety of names in the market, including black mode, night mode, light-on-dark mode, and so on.

It is widely used in website and web app development these days.You may also want to include it in your PDF file because PDFs typically have a white background with black text, which strains your eyes when viewed at night.

The Dark Mode feature of Chrome can be activated for your homepage, toolbar, and settings, in addition to any other pages you want.You simply have to Open Google Chrome > At top right corner , tab More >Settings> Themes Then choose Dark mode theme.

However, this does not work with PDF files because PDF files have a defined format that cannot be modified later.

So, lets look How to view a preview of a PDF file with Google Chrome.

Method 1: Using Console

Steps are very simple and they are as follows.

1 Open Chrome Browser and Preview any of your PDF file

2 Then Right click on your PDF and click on Inspect.

3 Goto Console tab , and paste this below Code.

var cover = document.createElement("div");
let pdfCSS = `
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    mix-blend-mode: difference;
    z-index: 1;
`
cover.setAttribute("style", pdfCSS);
document.body.appendChild(cover);

**fig. Goto Console and paste the code**

Final Result is as follows:

**fig. success-preview dark mode in chrome**

What this Code is doing ?

When you load this script into the console, a div will be created at runtime. Then css rules that are mentioned in between the backticks ` will then be applied via the style attribute to the 'cover' div, and the div will then be bound to the body of the page.

Here in the CSS,An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place regardless of how far the page is scrolled.

What is 100vw width means ?

100vw is the same as taking up 100% of the visible screen width.The value 100vw instructs the browser to span the entire viewport width.

What is 100vh height means ?

100vh indicates that the initial body height will take up 100% of the available viewport height.

What is mix-blend-mode?

The mix-blend-mode CSS property determines how the content of an element should blend with the content of the element's parent and the background of the element.

For mix-blend-mode:difference visit here.

📓 Note: This code maynot work if you are using Google Chrome older than 41 version.So better always upgrade your Chrome Browser

Method 2: Using Bookmark Techniques

We can simply use the above code to create a bookmark, and then preview the PDF in Chrome in dark mode with a single click. So let's get started.

1 Goto 3 dots at top right corner.

2 Click on Bookmarks > Bookmark Manager

**fig. Goto bookmark manager in chrome**

3. Right click on empty area and Click on Add new bookmark

4 Give the name to the bookmark and paste below code in URL.

javascript:(function(){var cover=document.createElement("div");let pdfCSS="position: fixed;\npointer-events: none;\ntop: 0;\nleft: 0;\nwidth: 100vw;\nheight: 100vh;\nbackground-color: white;\nmix-blend-mode: difference;\nz-index: 1;";cover.setAttribute("style", css);document.body.appendChild(cover);})();

5 Click on Save button and this will create a bookmark as shown below.

6 Open pdf you want to preview in dark mode.

7 Click on 3 dot at top right corner

8 Click on Bookmarks and then Preview Pdf .Now you will get desire pdf in dark mode.