3

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?

reitermarkus
  • 678
  • 1
  • 11
  • 27

3 Answers3

3

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.

DᴀʀᴛʜVᴀᴅᴇʀ
  • 7,681
  • 17
  • 73
  • 127
adaptivegarage
  • 61
  • 5
  • Nice. Has this been added in an update or was this available before? – reitermarkus Nov 24 '14 at 13:12
  • I suppose so and I am about to test it. – adaptivegarage Nov 25 '14 at 11:39
  • According to @torazaburo 's answer and comments: in Night theme iBooks sets :root's background-color to black, any other element's (including body) background-color to transparent and color to #bebebe. If you want to override it, you might want to look at the link above once again, I have updated it. – adaptivegarage Nov 25 '14 at 11:47
  • The current version of iBooks also includes a third theme named "Gray". For that the following selector works: `:root[__ibooks_internal_theme*="Gray"]` – RobC Jun 22 '17 at 12:15
0

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.

  • Ok, tested it, but it doesn't work. Seems that the background color is not part of the html area. – reitermarkus Jan 18 '13 at 20:48
  • If you want to pursue this line of attack, you could try the background color of some other div or a fake element you create for the purpose. –  Jan 19 '13 at 11:47
  • Well, this won't work because the background color will be transparent. I actually tested this with the `body` `background-color` set to `inherit` so it would get the color of the `html` element. – reitermarkus Jan 19 '13 at 16:03
-1

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; }
}
Ronie
  • 21
  • 2