Pure CSS ePub theme detection (White / Sepia / Night) in iBooks (Mac OS and iOS included)

theme-detect.css

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

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.

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.

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.