Themes & Skins for pdf.js

[milkovsky]

Are there any developed themes or skins for pdf.js exept Dark theme? I tried to find any opened issue for it. Then I googled but I haven't find any developed theme for pdf.js.

[timvandermeij]

@milkovsky As of now, there is no support for other themes than the default dark theme. However, since all styling is done in web/viewer.css, it's easy to create a custom theme for your fork. Maybe theming support will be added in the future, or if you or someone creates a patch for that. :)

[milkovsky]

ok. I've got the idea. thank you

[milkovsky]

I'll open this issue again for developing patch for themming support.

[yurydelendik]

@milkovsky see also https://bugzilla.mozilla.org/show_bug.cgi?id=801407

[milkovsky]

ah. thanks. should I close this issue here?

[yurydelendik]

nope. will your solution solve only pdf.js extension theme or for web viewer as well?

[milkovsky]

I don't have a solution yet.

[ibuilder]

Should just style with bootstrap and fontawesome (replace bulky images). Any bootstrap skin would work then and there would be no need to build theming support.

[speedplane]

For those looking for skinning inspiration, here is one I know of based on PDF.js:
https://peerlibrary.org/p/2uX4z4P2nGGwLQTNt/structural-adaptation-via-l_p-norm-oracle-inequalities

[ghost]

It would be awesome if there is other theme. I am currently using the pdf viewer Chrome extension to view pdfs and found it hard to change the theme by change the code which is installed directly from chrome web store.

[oytuntez]

Or we could at least provide a dynamic CSS file, such as SCSS, Sass etc; so everybody can quickly implement their own small customizations such as colors and fonts.

[medikoo]

I'm fine with official skin, however documentation says that it should not be used in unmodified form.

Therefore it'll be great to be provided with at least single skin that can be openly used without license issues. Does anyone know one?

[timvandermeij]

I'm going to link #6706 here as it is also a bit relevant for this issue.

If anyone would like to work on making the CSS more generic and easier to adjust, we can review PRs that do so.

[vKnmnn]

I didn't find this issue at first, so i had opened another already. What is your status @milkovsky ?

[milkovsky]

@LordTaifleh My status: I am not doing any development here. In the end I used the default theme because of lack of project budget. The issue remains open for future contribution by community,

[vKnmnn]

Alright,
I went with a solution via Firefox-plugin Stylish, making a template for overriding default style of pdf-js like this:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document regexp(".*\.(p|P)(d|D)(f|F)") {
body {
	background-color: #2f343f !important;;
	background-image: url(images/texture.png);
}
  
#toolbarContainer, .findbar, .secondaryToolbar {
	 background-color: #2f343f !important; 
	 background-image: url(images/texture.png);
}

#toolbarSidebar {
  background-color: #2f343f !important; 
	background-image: url(images/texture.png);
}
}

Note that it does not work for anchored pdf's eg.: xyz.pdf#5

[filips123]

Is there any update? This issue is over 5 years old.
There should also be some support for maybe more "modern" themes.

[oytuntez]

I think pdf.js should be refactored to support a preferred styling framework. Or at least present some easier-to-use CSS/LESS variables... :)

[EtagiBI]

Hello!
I'm planning to implement PDF.js viewer with some modifications. May I safely remove some functionality (buttons) from default Viewer and change interface colors? Will it be legitimate?

As far as I understand, I can just edit viewer.html, viewer.css and viewer.js to remove / change stuff. Is it a correct assumption?

[timvandermeij]

Yes, that's correct. In fact, we even ask users to modify the default viewer for third-party deployments (see https://github.com/mozilla/pdf.js/wiki/Third-party-viewer-usage).

[timvandermeij]

Fixed by #11077. There is now a light and dark theme in the Photon (Firefox) style, and the colors/icons are now CSS variables so they can be tweaked much more easily for third-party usage.