caliblur for epub reader

[leram84]

We need the caliblur.js/css loaded on the epub reader. We have some code in there to add an X button to the top right so that a user can close out the reader and revert back to the book details page, but its not loading currently.

There might be a few adjustments we need to make once its in place to adapt it from the subfliter method we were using before, but first we need it loaded.

Thanks!

[gelsas]

Does caliblur mean also a dark version of the reader in caliblur colors?

[leram84]

no, we might do it for cw itself, but it doesn't make sense to do that in caliblur

[OzzieIsaacs]

Calibre-web has 4 readers:

• pdf Reader
• epub Reader
• txt Reader
• comic Reader (for cbr, cbz, cbt files) The comic reader already has a dark mode: I think it would be great to have something similar (also with the user handling) for the epub reader, so there is no break in the design. (Theme setting on the screenshot Hell means bright and Dunkel means Dark

[adocampo]

I'm agree. It's not important, but would be nice to have an X to close the reader. I found it weird the first time when I didn't find the cross to close the reader, and I was afraid that closing the tab, would close CW itself. Once closed the tab, I realized it had opened a tab for the reader, which I didn't noticed at first. I guess a simple cross can help to avoid those situtations.

And as you all know, I up vote for a dark reader and let set it on CW, as per user and/or globally (ideally both).

[hexeth]

I would start by updating epub.js

The current versions of epub.js appears to support themes, but the version used in CW is too old. There's an example doc here as well as the documentation here.

It seems like if I'm reading the above correctly, themes can be registered and triggered via custom buttons.

[OzzieIsaacs]

Juhu @adx442, here is the feature you requested

[Jakgab617]

I was looking at the dark mode possibility for the epub reader. I tried changing colors in main.css and popup.css (reader window) just to see what will happen. The menu, panel etc changed. But the actual book background and text color remained the same even with color declaration and !important tag.

The reader window still follows the bootstrap/original css colors. I thought that with the caliblur theme activated new windows/tabs will automatically follow the theme. I checked the source code for caliblur and there is no declaration for new window properties. Maybe this will solve it.

The comic reader might be able to implement the light/dark theme in the reader because the khtoom.js, css and html is easily accessible for edit. The epub reader on the other hand has the epub.js, reader.min.js etc that needs to be edited as well if i follow what is done with the comic reader for dark theme. Maybe the easiest will be adding it in caliblur.

Im not really a programmer and not versed in css or bootstrap, so I don't know if what I say makes sense.

[hexeth]

The theme won't apply because the main content of the ebooks in epub.js are in an iframe, so do not exist inside the DOM that the CSS is applied to:

epub.js does support theming, which would need to be applied to this epub.js

Here is a short example. Line 1 says register the css of "background gray" to a theme we will call "dark". Line 2 then selects the dark theme.

reader.rendition.themes.register("dark", { "body": { "background": "gray"}});
reader.rendition.themes.select("dark");

I don't have time to work on this myself, but it's 100% possible.

[Jakgab617]

Yes, It is possible.

As I said, i was directly changing the values just to check what's going on. I looked at it again and successfully changed the reader to dark.

Referring to your pic about iframe and the problem I have previously mentioned. The background and value of that iframe is affected by a call in normalize.css.

Using the standard theme, removing the "inherit" tag in normalize.css and directly changing the values of backgound and font color in main.css worked. Then I switched to caliblur and what happened is that all changes I did in main.css remained but that iframe became full on white bg and black font again.

I will check what changed when I applied caliblur theme. And will also try what you have suggested.

[hexeth]

I believe we disabled caliBlur in the e-reader. The CSS doesn't seem to be in source. There is also a no-js class on the body, which I believe was to disable caliBlur.js from screwing up the ereader layout

[itszaen]

Any updates on this?

[adocampo]

Hi guys, awesome implementation of themes on 0.6.19!! :D Now my eyes won't bleed at night anymore. :P

EDITED: could the themes be configured globally, per user, or at least as per book? Now it doesn't remember the theme and must be chosen every time a book is opened.