How to Set Link Color for Apple Books in Dark Mode?

[Slevin#7]

I have an EPUB containing links which I wanna apply specific colors to. This works well for all e-readers I've tested so far, except for Apple Books which refuses to display any other color for links than the default blue.

The currently applied CSS rules are:

@media (prefers-color-scheme: dark) {
  a,
  a:link,
  a:visited,
  a:hover,
  a:focus,
  a:active {
                      color: #cc0000 !important;
    -webkit-text-fill-color: #cc0000 !important;
  }
}

And the HTML has the required Apple specific dark-mode class "ibooks-dark-theme-use-custom-text-color" set on the html-tag.

Does anybody know how to enforce Apple Books to style the links in dedicated colors?

I append an example ebook which as said works almost everywhere - but unfortunately only almost...

[RbnJrg]

Originally Posted by Slevin#7

I have an EPUB containing links which I wanna apply specific colors to. This works well for all e-readers I've tested so far, except for Apple Books which refuses to display any other color for links than the default blue.

The currently applied CSS rules are:

@media (prefers-color-scheme: dark) {
  a,
  a:link,
  a:visited,
  a:hover,
  a:focus,
  a:active {
                      color: #cc0000 !important;
    -webkit-text-fill-color: #cc0000 !important;
  }
}

And the HTML has the required Apple specific dark-mode class "ibooks-dark-theme-use-custom-text-color" set on the html-tag.

Does anybody know how to enforce Apple Books to style the links in dedicated colors?

I append an example ebook which as said works almost everywhere - but unfortunately only almost...

You’ve run into one of the classic pain points of Apple Books: it ignores most css rules related to link colors in dark mode, even when you use !important. Apple enforces its own scheme to guarantee contrast and readability, and it often overrides anything declared in the epub.

What you already tried (color and -webkit-text-fill-color) works fine in most readers, but in iBooks this happens:

1) Apple Books applies its own theme depending on the user’s choice (Light / Sepia / Dark).

2) In dark mode, links are forced to blue for guaranteed contrast.

3) Even with the ibooks-dark-theme-use-custom-text-color class, only regular text can be customized, not links.

What you can try is to force fill on an inner span instead of <a>. Wrap the link text in a span and apply the color there. Something like:

1. In your .css stylesheet:

a {
  color: inherit !important;
  text-decoration: none !important;
}

@media (prefers-color-scheme: dark) {
  a > span {
    color: #cc0000 !important;
    -webkit-text-fill-color: #cc0000 !important;
    text-decoration: underline;
  }
}

2. In your .xhtml file:

<a href="your_ref_here.xhtml"><span>Go to Chapter 2</span></a>

This should work. Another thing you could try is to use the background-clip property, something like:

@media (prefers-color-scheme: dark) {
  a {
    color: inherit !important;               /* neutralize Apple's override */
    background: #cc0000 !important;          /* desired color */
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-decoration: underline;
  }
}

In this last case you don't need to enclose the text in a span tag. Try both methods.

[Slevin#7]

@RbnJrg, thanks for this comprehensive discription. Your first suggestion I've already tried - but didn't work. The second approach is kinda crazy shit I'd never come up by my own^^, thus big points for that - although, you can guess, unfortunately doesn't work as well.

So at this point I assume there is not much to do than to gratulate each and everyone of the e-readers to give their best in making beautiful books from a pain in the ass to just not doable. I mean, there is no big one who refuses to take part in being as annoying as can be. Google Play Books for example just doesn't let you set the text-color for dark mode, insiting to display an ungly gray.

And I could go on on all the others as well, it just woudn't help, so I'd spare my nerves and wish them all just roses....

[JSWolf]

My solution is to not use Books for anything.

[RbnJrg]

Originally Posted by Slevin#7

@RbnJrg, thanks for this comprehensive discription. Your first suggestion I've already tried - but didn't work. The second approach is kinda crazy shit I'd never come up by my own^^, thus big points for that - although, you can guess, unfortunately doesn't work as well.

Indeed, Apple Books doesn't allow much flexibility in dark mode But do one last try; instead to apply a color do cheat and apply a gradient to the text. Of course, this gradient isn't actually a gradient, but a solid color. Use the following style:

@media (prefers-color-scheme: dark) {
    a,
    a:link,
    a:visited,
    a:hover,
    a:focus,
    a:active {
        background: linear-gradient(#cc0000, #cc0000) !important; 
        background: -webkit-linear-gradient(#cc0000, #cc0000) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
    }
}

As you can see, the gradient is not such because the same color is used as stops.