Night Mode for PDF Viewer

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)

17 Likes

+1 upvote

+1 upvote

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);
}
7 Likes

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.

1 Like

+1 upvote

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

1 Like

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.

6 Likes

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

cheers

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

This was implemented.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.