Last active
December 1, 2024 00:39
-
-
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)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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. | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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