: Re: Can you use CSS to target iOS night reading mode? Is there a way to target Night mode (or Sepia or Gray mode for that matter) on iBooks with custom CSS? I have decorative elements in my

@Kevin

Vote Up Vote Down   0 Reactions

Login to give Reaction!

I found the answer to this on stackoverflow. You can target different iBooks reading modes using these special CSS selectors:

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

Here's an example. I was using an <hr> below my chapter heading. I set the color to black, but in Night mode it disappears on the black background. This CSS changes the color to match the text when Night mode is active:

hr {
border: 0;
border-bottom: 1px solid black;
}
:root[__ibooks_internal_theme*="Night"] hr {
border-bottom: 1px solid #b0b0b0 ;
}

Used appropriately, this is super useful for getting your decorative elements to show up in Night/Gray modes or for retaining syntax highlighting in a programming book while in Night/Gray mode. However, as others have said on stackoverflow and at the github page with sample code, this is not a method that Apple has officially sanctioned, so remember not to abuse it or they could start blocking it.

For reference, here are the default text and background colors for all four themes (obtained from screenshots of iBooks on my iPhone 6):

"White"
color: #000000 ;
background-color: #fbfbfb ;
"Sepia"
color: #000000;
background-color: #f8f1e3;
"Gray"
color: #c9caca;
background-color: #5a5a5c;
"Night"
color: #b0b0b0;
background-color: #121212;

Free books android app tbrJar TBR JAR Read Free books online gutenberg

(0)

Login to post a comment!