Shining a light on eBook Night Modes

hacks and tricks for styling around night mode 

One of the most frustrating parts of being an ePub designer and developer is system overrides. Overzealous platform styling and a veritable famine of documentation means we can’t ever figure out how to create a better reading experience for readers and make reading platforms happy.

Night mode is an obvious example of the difficulty of designing for eReaders. It’s a wonderful feature—one click switching of styles that adapts to how many readers would prefer to read in certain environments. Unfortunately it’s an absolute disaster for 3rd party developers and designers to style around.

Both iBooks and Kindle reader apps seem to set every element to have a background-color of black. No questions asked, no trying to ascertain if that’s really appropriate for the content. Just black.

While in the process of redesigning the default styles for eBooks generated by Creatavist I discovered just how overreaching these styles can be. Because our stories often include a lot more features than the traditional novel, we need to make sidebars, videos, and other information more apparent through design.

iBooks: White Theme
left, a sidebar design
right, a timeline design

But when a reader switches to night mode, a lot of this was initially lost.

iBooks: Night Theme
our sidebar could be confused with body text; and our timeline is graphic-less

There didn’t seem like a lot I could do to solve this. All backgrounds become black with a device-level override—no way to change that. The key is to utilize non-background elements that aren’t forced to be black: namely borders.

iBooks: Night Theme
white borders save our design
iBooks: White Theme
The borders disappear when on white. The design is saved!

The key to a consistent design is to make the borders look purposeful yet subtle (or outright invisible) in White and Sepia themes, and then to have them take on structural roles in Night mode.

.timeline-item {
padding: .75em 0 .75em 5%;
/* black for light themes */
border-left: 1px solid black;
position: relative;
}
.timeline-item:after {
content: '';
display: block;
/* etc. */
height: 100%;
width: 1px;
/* use rgba() to make it subtle for night theme */
background-color: rgba(255,255,255,.5);
z-index: 1;
}

.timeline-item:before {
content: '';
display: block;
/* etc. */
/* black background so it works in light themes */
background-color: black;
/* white border adds for night theme support */
border: 2px solid white;
}

Note: psuedo-selector (:before, :after) support is spotty for e-readers. The sidebar example (above, left) uses a simple border-top and border-bottom to achieve the same affect that is supported much more widely across e-reading devices.


This works great in the case of things like the timeline, but it becomes another issue when you want to use borders in a White theme and have some delineation in the Night theme.

The solution here is to use box-shadows to act like borders.

iBooks:
on right, White;
on left, Night
Kindle for iOS:
the box-shadow is visible in Sepia, but not glaringly obvious.
.inline-extra {
width: 80%;
padding: 10%;
border-top: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
background-color: rgba(0, 0, 0, 0.05);
/* box shadows as fake borders */
-webkit-box-shadow: 0 -1px 0 white, 0 1px 0 white;
box-shadow: 0 -1px 0 white, 0 1px 0 white;
}

(Note: I don’t really recommend trying to use box-shadow on the left side of an element. It seems both iBooks and Kindle apps would rather crop the left side. In these cases you should probably try to use border-left if possible.)

Box-shadows are a CSS3 spec, but have become standardized quickly. iBooks and KF8 support them (support is spotty on other devices, so be aware).

Platform level specific overrides are no doubt one of the most painful things about designing for eBooks, but working within those constraints you can still find ways of creating books that are beautiful,useful, and flexible.

Check out the eBooks created with Creatavist by signing up for a free trial.

The team at Atavist is also hiring.