Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Fix too low contrast for text background color i.e. yellow highlight against white text

See original GitHub issue

Feature Request

Is this feature request related to a problem?

text highlighted with bright background colors i.e. yellow are very hard to read against white text due to a too low contrast

Screenshots

Additional Context

An additional settings to enable and ideally control text background color contrast would be idea to fix this for either all or individual websites.

I love this plugin and hope this can be solved as I don’t want to disable the plugin on sites like Gmail just so I can make text readable. Hoping I didn’t miss any option to configure this as I tried the adjustment option in version 5. Only changing from Dynamic to Static works but I loose the overall dark feel that I prefer from the Dynamic mode as Static makes text more brownish rather then white against black and all elements on the website are highlighted.

I noticed there is a custom CSS editor for Static mode. Is there any way i can have the exact same effect as Dynamic mode and just address the text background color issue via css?

the below I think would address this [data-darkreader-inline-bgcolor] {color:black}

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:21 (8 by maintainers)

Top GitHub Comments

3reactions

staniocommented, Oct 15, 2021

Here’s possibly more straightforward scenario – non-user-selected style:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dark highlight test</title>
  <style>
    body {
      color: black;
      background-color: white;
    }
    .hilite {
      background-color: yellow;
      color: black;
    }
  </style>
</head>
<body>

<p>
Bacon ipsum dolor amet boudin dolor ut dolore short ribs pig. Eu
<span class="hilite">capicola meatball jowl short ribs ad</span>
pastrami pariatur porchetta voluptate.</p>

<p>
Bacon ipsum dolor amet boudin dolor ut dolore short ribs pig. Eu
<span style="background-color: yellow; color: black;">capicola
meatball jowl short ribs ad</span> pastrami pariatur porchetta
voluptate.</p>

</body>
</html>

Both of the background-color and color get adjusted by darkreader but the background color is too light for the newly applied foreground color:

default-style

Dynamic

dark-reader

For comparison:

Filter

filter-mode

Filter+

filter-plus

1reaction

markusd1984commented, Oct 15, 2021

Brilliant and thanks for creating the demo @stanio.

The example with the class though seems to get no special treatment from dark reader in Dynamic mode, I mean the [data-darkreader-inline-color] and [data-darkreader-inline-bgcolor] are not generated.

Anyways the text formatting in Gmail uses style i.e. <b style="background-color: rgb(255, 255, 0); --darkreader-inline-bgcolor:#cccc00;" data-darkreader-inline-bgcolor="">Highlighted Text</b>

Here comparison what the solution could look like for Dynamic, which I think is the best mode/experience for most sites, changing color to black