-
-
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) | |
| 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. | |
| */ |
@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
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