Skip to content

Instantly share code, notes, and snippets.

@adaptivegarage
Last active January 17, 2023 06:04
Show Gist options
  • Save adaptivegarage/aef95223fab9a39db45f to your computer and use it in GitHub Desktop.
Save adaptivegarage/aef95223fab9a39db45f to your computer and use it in GitHub Desktop.
Pure CSS ePub theme detection (White / Sepia / Night) in iBooks (Mac OS and iOS included)
/*
Pure CSS ePub theme detection (White / Sepia / Night) in iBooks (Mac OS and iOS included)
Version 1.1
Note that iBooks actually uses internal JavaScript to set the "__ibooks_internal_theme" attribute on :root (html) element
every time the theme is changed, but this happens independently of whether your epub html markup is scripted or not.
Discovered and tested in iBooks on Mac, iPhone and iPad by
https://twitter.com/adaptivegarage
*/
/* For White Theme */
/* ... write your primary CSS here ... */
/* For Sepia Theme */
:root[__ibooks_internal_theme*="Sepia"] /* elements */ {
/* ... override your CSS here ... */
}
/* For Night Theme PLEASE READ COMMENTS BELOW */
:root[__ibooks_internal_theme*="Night"] /* elements */ {
/* ... override background-color: */
background: -webkit-linear-gradient(/* color */, /* (the same) color */);
/* ... override text color: */
-webkit-text-fill-color: /* color */;
/* ... override rest of your CSS here ... */
}
/*
PLEASE READ CAREFULLY:
iBooks adjusts HTML and CSS markup behind the scenes in many ways and when the Night theme is selected (not White or Sepia),
these CSS styles (among others) are forced:
:root {
background-color: black !important;
}
:root * {
background-color: transparent !important;
color: #bebebe !important;
}
If you need to override background or text color of *any* element in the Night theme, use the CSS above, but please WISELY
and only when absolutely necessary.
I believe that abusing this method will cause it banned by Apple in future iBooks releases.
*/
@adaptivegarage
Copy link
Author

Note that iBooks actually uses internal JavaScript to set the "__ibooks_internal_theme" attribute on :root (html) element every time the theme is changed, but this happens independently of whether your epub html markup is scripted or not.

@adaptivegarage
Copy link
Author

If you need to override background or text color of any element in the Night theme, use the CSS above, but please WISELY and only when absolutely necessary.
I believe that abusing this method will cause it banned by Apple in future iBooks releases.

@poisontofu
Copy link

Thanks for this! Proved very helpful on a recent project.

In iOS 9 and OS X El Capitan, an inverted but less-dark gray theme was added to iBooks (here's an article about it).

The CSS required to override styling when this theme is active is similar to what's in the above snippet:

:root[__ibooks_internal_theme*="Gray"] /* your element here */ { … }

In my brief testing, the Gray theme seems to override elements' background-color and color attributes in the same way as the Dark theme does, so you may need to use similar workarounds if you want to target text/background color when the Gray theme is active.

@blendenzo
Copy link

blendenzo commented Apr 4, 2017

Thanks for this. It was exactly the info I needed. Worked great for making my <hr> elements show up in Night mode. If anyone is interested in matching the theme colors, here are the default text and background colors for each of them:

"White"
	color: #000000;
	background-color: #fbfbfb;

"Sepia"
	color: #000000;
	background-color: #f8f1e3;

"Gray"
	color: #c9caca;
	background-color: #5a5a5c;

"Night"
	color: #b0b0b0;
	background-color: #121212;

@ColinLondon
Copy link

:root[__ibooks_internal_theme*="Night"] no longer seems to be working.

@marketmann
Copy link

marketmann commented Oct 21, 2020

Confirmed.

:root[__ibooks_internal_theme*="Night"] no longer works... with IOS14.

I say ios14 because the override works on my mac and iphone. The iphone's running ios13. The mac is running the latest public release.

My ipad though, that's running ios14—and that's the only place where it doesn't work. The ipad! The thing that's got the best screen size.

I suspect they changed class names.

@robinwhittleton
Copy link

robinwhittleton commented Dec 12, 2020

I ran into this recently. This is not going to work for iOS 12 and under, but it looks like Books on iOS and Mac now supports the prefers-color-theme media query. It doesn’t differentiate between white/sepia and grey/night, but if you’re good with a binary switch you can use that. The PR that adds this to my project is standardebooks/tools#379.

@tenephor
Copy link

tenephor commented Oct 25, 2021

This is an old thread but if in case you're here an a search. @marketmann On iOS 15.0.1 (the iphone anyway) the class names are now "epub-sepia", "epub-white", "epub-gray", "epub-night".
Notice that they lower are case.
On MacOS (Big Sur) the class names differ and still contain capitals: "BKSepiaStyleTheme", etc.

So changing the css to, i.e., :root[__ibooks_internal_theme*="ight"] works for both MacOS and iOS

@tenephor
Copy link

tenephor commented Sep 19, 2022

@marketmann @robinwhittleton @poisontofu @ColinLondon @adaptivegarage

With iOS 16 there are potentially 12 background colours (themes).
But in iOS 16, Books does not seem to set the "__ibooks_internal_theme" attribute on :root (html) element at all!

Attributes on :root (macOS Monterey 12.5.1)
0: xmlns, (as user entered in source)
1: xmlns:epub , (as user entered in source)
2: __ibooks_internal_theme
3: __ibooks_internal_level , 1
4: __ibooks_writing_mode , horizontal-tb

Attributes on :root (iOS 16)
0: xmlns , (as user entered in source)
1: xmlns:epub , (as user entered in source)
2: __ibooks_content_is_japanese, false
3: __ibooks_content_is_chinese , false
4: __ibooks_reading_mode_paged
5: __ibooks_internal_theme , always returns undefined!
6: __ibooks_internal_level
7: __ibooks_writing_mode, horizontal-tb

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment