[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.