Fonts become less crisp after inverting the email body in chromium browsers

[jackbuehner]

The font in the email content still looks a little bit "rotten" in detail compared to that in the composer. Is it possible to make the content font a little thicker (or make it render better) so that it looks the same as the composer font?

Originally posted by @ballII in https://github.com/jackbuehner/gmail-dark-modifications/issues/3#issuecomment-468990803

[jackbuehner]

It seems that this issue only occurs in Chrome, but I have not yet found any solutions.

[jackbuehner]

I tried some solutions from https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome, but none of them worked.

[ballII]

@jackbuehner Thank you. Somehow Dark Reader renders both the email content and the composer well. Isn't it also using CSS?

[jackbuehner]

@ballII Dark reader uses a variety scripts to read the webpage and change the CSS based on what it sees. Since my style simply injects predefined CSS, I can't predict what is occurring in the email, so I just invert the email and readjust the colors using filter: invert(93.2%) hue-rotate(180deg); This has the unfortunate side effect of making the text more blurry on chromium browsers (which is why I did not see the issue on Firefox). I'll try revisiting this issue in a few days when my work load for school decreases.

[ballII]

I found a solution that works for me. Change:

.gs > div:not(.gE):not(.wj) {
    filter: invert(93.2%) hue-rotate(180deg);
    background-color: #fff;
  }

to

.gs > div:not(.gE):not(.wj) {
    filter: invert(93.2%) hue-rotate(180deg);
    background-color: #fff;
    -webkit-text-stroke: 0.5px;
  }

[m4heshd]

@ballII no change at all..