: 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

Vote Up Vote Down   0 Reactions

Login to give Reaction!

While this is interesting, I have to wonder whether you are overthinking the problem.

All that night mode does is invert the colors of the text and headlines. I can't imagine a case where the inverted colors would represent a problem (unless maybe you were using a third font color that was in between or you were coloring some background?)

It's certainly important to test night mode. I also encountered an issue with some images I used in my heading. The images themselves had white background (or near white background) and looked less than ideal in night mode. Also, I discovered that it wasn't scaling to full width as I had thought. If you are using a transparent image, you'd want to make sure that there were enough contrasts with a darkened background. Or maybe specifying a background color would make sure that it is inverted in night mode.

But I think readers expect that night mode might make a few things look funny.

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

(0)

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)