Skip to content

Commit

Permalink
Fix dark mode in iOS13+ Books
Browse files Browse the repository at this point in the history
iOS 13+ supports the `prefers-color-scheme` media query, so we can use that to invert images. The old and new versions play nicely together, in my testing on the latest versions at least.
  • Loading branch information
robinwhittleton committed Dec 12, 2020
1 parent 0e5b4b2 commit 15efc53
Showing 1 changed file with 14 additions and 2 deletions.
16 changes: 14 additions & 2 deletions se/data/templates/compatibility.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,29 @@ img[epub|type~="se:image.color-depth.black-on-transparent"][epub|type~="z3998:pu
background: transparent !important;
}

/* And except in Apple Books, where we can target night mode specifically */
/* And except in prefers-color-scheme devices / Apple Books, where we can target dark mode specifically */
/* Books on iOS 13+ and macOS 10.14 should support the media query, so the theme hack can be dropped when they’re the baseline. */
:root[__ibooks_internal_theme] img[epub|type~="se:image.color-depth.black-on-transparent"]{
background: transparent !important;
}

/* Enable night mode in Apple Books */
:root[__ibooks_internal_theme*="Night"] img[epub|type~="se:image.color-depth.black-on-transparent"],
:root[__ibooks_internal_theme*="Gray"] img[epub|type~="se:image.color-depth.black-on-transparent"]{
filter: invert(100%);
}

@media (prefers-color-scheme){
img[epub|type~="se:image.color-depth.black-on-transparent"]{
background: transparent !important;
}
}

@media (prefers-color-scheme: dark){
img[epub|type~="se:image.color-depth.black-on-transparent"]{
filter: invert(100%);
}
}

/* Help preserve poetry formatting after Kobo adds its special <span>s */
[epub|type~="z3998:poem"] p span.koboSpan,
[epub|type~="z3998:song"] p span.koboSpan,
Expand Down

0 comments on commit 15efc53

Please sign in to comment.