CODEWITHSUNDEEP
htmlpublishingepubibooks
reitermarkus
reitermarkus

Reputation: 708

Any way to detect if dark theme is active in iBooks from within EPUB?

Does iBooks add something like a CSS class or anything else in order to be able to style some sections of the book differently (in lighter colors) when the night mode is active?

Upvotes: 4

Views: 1598

Answers (3)

adaptivegarage
adaptivegarage

Reputation: 71

iBooks adds a __ibooks_internal_theme attribute to the :root (html) element with a value that's changing with the theme selected.

Go ahead with this:

:root[__ibooks_internal_theme*="Sepia"]    
:root[__ibooks_internal_theme*="Night"]

You can find more details on GitHub: theme-detect.css

I will eventually add details on CSS limitations for the three themes.

Upvotes: 4

user663031
user663031

Reputation:

Computed Styles

You could try doing a window.getComputedStyle(document.body).backgroundColor. This is not tested.

EDIT: Concerning getComputedStyle, my mistake--background color (assuming that's what iBooks is using) is NOT inherited, so getComputedStyle is not going to buy you anything. Since styling on the HTML element has different levels of support (HTML4 technically doesn't even allow a style attribute on the HTML element AFAIK), it is theoretically possible that your inherit trick did not work. I'd stick in a 

alert(document.documentElement.style.backgroundColor);

and see what pops up. Another brute-force approach is to do a 

alert(document.documentElement.outerHTML);

You'll get a huge amount of stuff in the alert box but it should scroll for you and you might be able to see something useful in there.

FWIW, Readium apparently does night mode with a background-color of rgb(20,20,20) on the html element.

Media Queries

It is reported that Apple has introduced proprietary media queries "paginated" and "nonpaginated" to detect whether the user is using the new scrolling mode in iBooks 3.0. It is possible that it has introduced a media query for the dark theme (actually called "night"), but I'm just guessing. In any way, there's no way to my knowledge to enumerate media queries, and so it would be a process of pure trial and error trying to find it.

Upvotes: 0

Ronie
Ronie

Reputation: 21

Without the help of iBooks, you can add another css for night mode. Just add this tag inside the 

<link rel="stylesheet" href="nightmode.css" class="night" />

Another solution is to make Custom Media Queries into your css file:

/* Sepia */
@media sepia {
* { color: #000000; }
body { background-color: #eae4d3; }
}

/* Black */
@media black {
* { color: #ffffff; }
body { background-color: #000000; color: #ffffff; }
}

/* White */
@media white {
* { color: #000000; }
body { background-color: #ffffff; }
}

Upvotes: -1

Related Questions