1

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 chapter headings that I would like to match with the text colors in the various modes, but as it is they are disappearing against the black background.

Since I'm trying to match those themes, what are the hex codes for the text and background colors? I know that the text in Night mode is not true white, so I'd like to match that if possible.

1

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;
0

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.

  • I think you and I have a different way of looking at this, and I guess that's fine. To each his own, as they say. Personally, I wanted to provide a rich reading experience to my readers regardless of what mode they were reading in. It took me hours of crawling the web to find this solution (which works great), so I thought I would share it here to save others the trouble. BTW, this method works great for swapping images depending on what mode the reader is using, so if you're using small file size decorative images (ornaments), you can provide alternate versions using img { content:url(); } – blendenzo Apr 6 '17 at 18:12
  • Thanks. BTW, I never knew about the :root [] element {} selector syntax. Quite useful. – idiotprogrammer Apr 6 '17 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.