Skip to content

Conversation

@JayPanoz
Copy link
Contributor

@JayPanoz JayPanoz commented Nov 13, 2025

This builds upon the discussion in #170

  • Removes mix-blend-mode from fallback implementation when the highlight API cannot be used so that there is no side-effect
  • Renames r2-highlight-0 to readium-highlight, and adds data-readium=true to the templated fallback, to follow the current pattern when injecting things

In practice I am not sure we need to add data-readium to the templated item since it already is in a container for which it is set, but at least it makes it clear it is injected by us if you query this item/className directly.

This is more consistent with the ids and classNames we use across the ts-toolkit packages.
Consistency with existing Readium-injected features.
@JayPanoz JayPanoz requested a review from chocolatkey November 13, 2025 12:55
Copy link
Member

@chocolatkey chocolatkey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding data-readium is a good idea.
If you've tested removing mix-blend-mode and it worked, then I'm fine with this change. I essentially brute-forced this solution while at DM and testing with light and dark mode styling at the time.

@JayPanoz
Copy link
Contributor Author

Glad you said that because I can see issues on testing again. Looks like I forgot to replace mix-blend-mode with z-index. And on additional testing I could catch some edge cases.

I will put that back in draft, as it's quite a nasty one – we can no longer derive dark mode from --USER__appearance as it is no longer in use. And well, the challenge is that the background and text colors can be completely arbitrary.

I'll take time to check how Thorium Desktop got around this issue as I can recall Daniel telling he had to do that too.

@JayPanoz JayPanoz marked this pull request as draft November 14, 2025 10:23
Adjust sRGB, remove helpers that were not tested or do not handle features properly, check dark/light using actual contrast against black and white
In case we do not find a backgroundColor or we cannot convert it to rgba (e.g. color names, unsupported format…)
@JayPanoz
Copy link
Contributor Author

So yeah it is really hard to do without mix-blend-mode, I'll have to check Daniel's code and file history to understand how he resolved it properly.

I've improved the color helpers slightly, and removed the one that could not be tested properly.

There are two obvious issues that can be addressed immediately:

  • isDarkMode is relying on ReadiumCSS custom properties, I added the computed style for documentElement as a fallback for when they are missing or not compatible with the helpers, although that is not catching the case where there is another color set in-between;
  • isDarkColor helper is trying its best to infer the color is actually dark but there is some conversion to rgba beforehand, and it does not support all the possible values.

RGB and HEX are covered – adding the computed style should return rgba directly so there's that –, but if we wanted to cover more, I guess we would need a dependency such as this one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants