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
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.
Open Chrome Browser and Preview any of your PDF file
Then Right click on your PDF and click on
Console tab , and paste this below Code.
var cover = document.createElement("div");
let pdfCSS = `
Final Result is as follows:
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.
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.
100vh indicates that the initial body height will take up 100% of the available viewport height.
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.
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.
Goto 3 dots at top right corner.
Bookmark Manager Click on
Add new bookmark . Right click on empty area and Click on
URL. Give the name to the bookmark and paste below code in
Save button and this will create a bookmark as shown below. Click on
Open pdf you want to preview in dark mode.
Click on 3 dot at top right corner
Bookmarks and then
Preview Pdf .Now you will get desire pdf in dark mode. Click on
Method 3: Using Chrome Extension
There are several chrome extensions for the chrome browser that are related to dark mode pdf. You can try the following:
Chrome Extension 1: Dark Reader Chrome Extension (link)
Chrome Extension 2: Pdf Color Inverter (link)
In this way you can preview pdfs with Chrome in Dark Mode.