Night Mode for PDF Viewer

[adaptive]

Use case or problem

Reading an PDF at night with regular bright colors (mostly white) hurts.
Inverting colors and/or shifting them to greyscale should be sufficient.

Proposed solution

Toggle a option for using Dark Mode

Current workaround (optional)

There is no workaround yet inside Obsidian. Other PDF Viewer supports that obviously.

Related feature requests (optional)

[ananthuthilakan]

+1 upvote

[dorkloon]

+1 upvote

[pseudometa]

You can already do that with a CSS snippet. This snippet will make any PDF display in Dark Mode, when Obsidian is in Darkmode.

.theme-dark .pdf-embed iframe,
.theme-dark .workspace-leaf-content[data-type="pdf"] iframe {
	filter: invert(0.85);
}

[ryanwwest]

This is nice and I’m going to keep using it. However, it would be nice to have a version that also makes the header bar, UI buttons and background color behind the PDF pages dark. Right now it also gets inverted to be light, which isn’t ideal.

[avril]

+1 upvote

[avril]

Contrast, brightness, dark mode for pdf (it works)

You can also change “brighness” and “contrast”. You just have to change the value.
You can create a file .css for each setting, but it is not working in the same time (I’m sure there’s a way to make it works together).

1. Dark mode (invert)
   .theme-dark .pdf-embed iframe,
   .theme-dark .workspace-leaf-content[data-type=“pdf”] iframe {
   filter: invert(0.85);
   }

2. Contrast
   .theme-dark .pdf-embed iframe,
   .theme-dark .workspace-leaf-content[data-type=“pdf”] iframe {
   filter: contrast(0.20);
   }

3. Brightness
   .theme-dark .pdf-embed iframe,
   .theme-dark .workspace-leaf-content[data-type=“pdf”] iframe {
   filter: brightness(0.20);
   }

This is how I choose my settings

[jacobhayes]

After the 1.3 update’s integrated PDF viewer, I had to update/simplify the selector to:

.theme-dark .pdf-viewer {
	filter: invert(0.85);
}

The new PDF viewer also automatically sets the header to dark.

[robodean]

so…noob question. where does one place this snippet of which you speak?

cheers

[robodean]

NVM - I figured i out. the snippet works like a charm.
thank you sir!

[WhiteNoise]

This was implemented.