1715361 - Dark UI: automatically convert light message content to dark

Status: RESOLVED FIXED

(Thunderbird :: Message Reader UI, enhancement, P1)

Description

[Richard Marti (:Paenglab)]

With the dark theme enabled we still show the messages like with the light default with white background and black text. We should convert this on the fly to a dark background and light text with a filter.

Fx has some extensions like Dark reader, Dark Mode, Dark Background and Light Text etc. that do this on web pages on the fly. Maybe we could implement something like them.

Comment 2

[Mike Cloaked]

Attachment: Screenshot_preview-dark-89.0b4-1.jpg correct dark rendering in 89.0b4

Preview pane was correctly rendered in 89.0b4 as in this image

Comment 3

[Mike Cloaked]

Attachment: Screenshot_TB-preview-90.0b1-1.jpg preview pane incorrectly rendered in dark mode in 90.0b1

In 90.0b1 the preview pane is rendered incorrectly as black text on white background despite dark mode being in use in 90.0b1

Comment 4

[Wayne Mery (:wsmwk)]

(In reply to Mike Cloaked from comment #3)

Created attachment 9227447 [details]
Screenshot_TB-preview-90.0b1-1.jpg preview pane incorrectly rendered in dark mode in 90.0b1

In 90.0b1 the preview pane is rendered incorrectly as black text on white background despite dark mode being in use in 90.0b1

same in 91 beta?

Comment 5

[Mike Cloaked]

Yes same in 91.0b1

Comment 9

[newsfan]

For plaintext e-mail that should be easily doable. Looking at (non-)flowed plaintext in the inspector, this is placed into a moz-text-plain/moz-text-flowed div. Adding CSS to messageBody.css should be all that is required.
https://searchfox.org/comm-central/search?q=moz-text-flowed&path=&case=false&regexp=false
https://searchfox.org/comm-central/search?q=moz-text-plain&path=

Comment 10

[John Bieling (:TbSync)]

Dropping this information here:

Adding "<meta name="color-scheme" content="dark light">" here:
https://searchfox.org/comm-central/source/mailnews/mime/emitters/nsMimeHtmlEmitter.cpp#329
enables theme support in the email viewer. It will make the background dark and the text bright if an email is viewed in the dark theme.

This works out-of-the-box for plaintext messages. More work has to be done for html messages, which do not use theme capabilities but use fixed text/background colors.

Comment 11

[Magnus Melin [:mkmelin]]

I think we need to see what we can do to finish this off for the next ESR. It's a major annoyance when using dark mode.

Comment 12

[John Bieling (:TbSync)]

This looks pretty simple (and seems to work).
https://gist.github.com/mreinstein/5360cac59a4304faf3cb5c7234eaf12b

The script needs a way to detect if dark mode is enabled and run if needed.

Comment 13

[John Bieling (:TbSync)]

Attachment: Proposal

This is a very simple add-on, which is based on the script posted before, using CSS invert(). Any solution involving CSS invert() must not use the theme meta tag, as that already adjusts all non-styled text and the invert() will flip them one more time.

In order to move this into core, the bundled JavaScript file needs to be loaded by the message pane directly. That's it. I uploaded the add-on, as I assume it is easier for testing.

CSS invert() does not flip the main background, so that is done manually. The add-on sets it to black. I also tried to use the grey from the sidebar, but many emails do include divs somewhere in the mail with a defined white background and those will get inverted to black and that looks a bit strange with the grey background around it. The NI overdue requests from bugzilla for example.

If you want to explore this option further, I could update the add-on to be switched on/off or set the desired background color.

For reference, this is the script:

function isDarkTheme() {
  return window.matchMedia("(prefers-color-scheme: dark)").matches;
}

function invert() {
  let css = 'html {filter: invert(100%); background-color: black}'; //  or #38383d / sidebar-background?
  let head = document.getElementsByTagName('head')[0];
  let style = document.createElement('style');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(css))
  head.appendChild(style)
}

if (isDarkTheme()) {
  invert();
}

Comment 14

[John Bieling (:TbSync)]

Attachment: inverter.xpi

Comment 15

[John Bieling (:TbSync)]

Attachment: invert80.xpi

This version is better for the eye, as it only goes to 80% and also adjusts the background to 80%, so the NI Overdue Request (as an example) looks nice.

If the script could get hold of the rgba value of the theme sidebar colour, it could calculate the needed invert values. Just some ideas.

Comment 16

[Richard Marti (:Paenglab)]

Works quite good. Images are also inverted. On HTML messages this could be good as long as they are logos etc. but when they are photos the inversion isn't so optimal. Also on plaintext messages with images shown online the images are inverted.

Comment 17

[Danny Colin [:sdk]]

but when they are photos the inversion isn't so optimal

<img> should be ignored

If you want to explore this option further, I could update the add-on to be switched on/off or set the desired background color.

Wouldn't it be possible to get the current theme colors and use the same color as the one for the message list or color-mix() if we want to make it a bit darker?

Comment 18

[Richard Marti (:Paenglab)]

We used #2a2a2e in the times we enabled the dark message view.

Comment 19

[John Bieling (:TbSync)]

Attachment: invert_greyBackground_jpgNotFlipped.xpi

This one does not flip JPGs and has a better background adjustment.

This is what happens:

const darkBackground = [42,42,46] //#2a2a2e

function isDarkTheme() {
  return window.matchMedia("(prefers-color-scheme: dark)").matches;
}

function invert() {
  let css = `html {
    background-color: rgba(${darkBackground.join(",")});
  }
  html, img[src*=".jpg" i], img[src*=".jpeg" i] {
    filter: invert(100%);
  }`;
  let head = document.getElementsByTagName('head')[0];
  let style = document.createElement('style');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(css))
  head.appendChild(style)
}

if (isDarkTheme()) {
  invert();
  let elements = document.querySelectorAll(`html, body, body > *`);
  for (let element of elements) {
    let color = window.getComputedStyle(element).getPropertyValue('background-color');
    let [r,g,b,a] = color.match(/[.?\d]+/g);

    // If a custom background color is set and it is close to white, replace it
    // with the dark background (inverted, so it gets properly inverted by CSS filter).
    if (r > 245 && g > 245 && b > 245) {
      element.style.backgroundColor = `rgba(${darkBackground.map(e => 255-e).join(",")})`;
    }
  }
}

Comment 20

[Ryan Lee Sipes]

Just chiming in to say thank you for driving this forward John (and Magnus and Richard). Our users will really appreciate this being improved!

Comment 21

[John Bieling (:TbSync)]

What needs to be discussed is how invasive the modification should be, to make it look good. The add-ons mentioned are doing quite a lot.

I was aiming for a CSS only solution, but that is not really possible, as the invert of white is black and that it to dark to read. I now look at the background of the email itself and its first child elements, and everything that is "close to white" will be converted to #2a2a2e by JavaScript.

I also do not flip JPGs but I have already seen emails with large PNGs which looks strange. So here I would like to suggest to manually check the size of images and decide based on that if an image should be flipped or not. I do think, small logos must be flipped. For example a png logo with transparent background with black strokes on white background will become invisible. If transparent background information can be extracted via JS, I could use that as well as flip selector.

Something I was also thinking about is to extend my background transformation to the entire email, and not just the first childs.

It definitely needs more feedback.

Comment 22

[PS]

The add-on "Dark Reader" exists for both Firefox and Thunderbird, only that the TB version is quite old:
https://addons.mozilla.org/en-US/firefox/addon/darkreader/
https://addons.thunderbird.net/en-US/thunderbird/addon/darkreader/

Seems like it's under very active development. Also note that apparently the add-on carries sophisticated site specific config:
https://github.com/darkreader/darkreader/tree/main/src/config

It's by far more more popular than the other add-ons mentioned in comment #0:
https://addons.mozilla.org/en-US/firefox/addon/dark-background-light-text/
https://addons.mozilla.org/en-US/firefox/addon/dark-mode-by-albert-inc/

Comment 23

[Magnus Melin [:mkmelin]]

Attachment: Bug 1715361 - Adapt message content to dark theme automatically. r=john.bieling,#thunderbird-front-end-reviewers

Somewhat based on the above, this seems to do it. Haven't tested a lot though.

Comment 25

[Magnus Melin [:mkmelin]]

John, any feedback on the patch?

Comment 27

[Yogesh]

I wanted to chime in to find out if this issue is still being worked on. Thunderbird still renders as black text on white background. I see that even for plain text emails. The logic to invert colours could be referred from Firefox's reader view. It simplifies CSS and allows options to modify text colour and typeface sizes.

To test I sent an email from Thunderbird beta in normal (not plain-text) mode. The email was sent as plain text anyway and was rendered in dark mode with black text and white background.

MIME-Version: 1.0
User-Agent: Mozilla Thunderbird Beta
Content-Language: en-GB
To: [e-mail]
From: Name Name <[e-mail]>
Subject: Something something dark mode
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 7bit
[other]

Hi,

Testing dark mode.

--
Signature.

Mozilla Readability Library is available as a standalone component on Github - https://github.com/mozilla/readability

This will be a huge upgrade to accessibility and will improve mail / newsgroup / rss reading experience massively.

Comment 28

[Yogesh]

Also I see that Gmail sends messages in both text/plain and text/html formats wrapped in a multipart/alternative MIMETYPE and email clients can render either of the two formats. I'm hoping this makes the logic for rendering the plaintext component easier.

[blah]
Content-Type: multipart/alternative; boundary="00000000000094a5520610b08770"

--00000000000094a5520610b08770
Content-Type: text/plain; charset="UTF-8"

Hi,

Test dark mode email

--
Signed

--00000000000094a5520610b08770
Content-Type: text/html; charset="UTF-8"

<div dir="ltr"><div>Hi,</div><div><br></div><div>Test dark mode email</div><div><br></div><div>--</div><div>Signed<br></div></div>

--00000000000094a5520610b08770--

Comment 30

[Alessandro Castellani [:aleca]]

Attachment: Bug 1715361 - Implement initial simple dark background and light text variation in message pane. r=#thunderbird-front-end-reviewers,freaktechnik!,mkmelin

Comment 32

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/863966483207
Implement initial simple dark background and light text variation in message pane. r=freaktechnik

Comment 33

[Magnus Melin [:mkmelin]]

Sheriffs please back out in next push due to failures of comm/mail/test/browser/message-reader/browser_darkReader.js

Comment 34

[Pulsebot]

Backout by [e-mail]:
https://hg.mozilla.org/comm-central/rev/b770f3c28702
Backed out changeset 863966483207 for causing failures in comm/mail/test/browser/message-reader/browser_darkReader.js. r=backout

Comment 35

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/5939d494b971
Implement initial simple dark background and light text variation in message pane. r=freaktechnik

Comment 36

[Magnus Melin [:mkmelin]]

opt, shippable, and CCov linux builds still failing on comm-central

Comment 37

[Alex Ihrig [:Thunderbird_Mail_DE]]

The message pane has no dark mode, if S/MIME encoded messages could not be decoded. The resulting error message (generic from Thunderbird) seems to be forgotten for this first implementation. Not sure, if there are more of these generic messages, which have to be adapted.

Comment 38

[Alessandro Castellani [:aleca]]

(In reply to Alex Ihrig [:Thunderbird_Mail_DE] from comment #37)

The message pane has no dark mode, if S/MIME encoded messages could not be decoded. The resulting error message (generic from Thunderbird) seems to be forgotten for this first implementation. Not sure, if there are more of these generic messages, which have to be adapted.

Thanks for the report, could you please open dedicated bug reports for these issues and needinfo me?
We're tackling this implementation in small batches to make it more manageable, so some issues are to be expected.
That's also why there's a pref in the settings to disable this feature in case of readability issues.

Comment 39

[Alessandro Castellani [:aleca]]

Release Note Request (optional, but appreciated)
[Why is this notable]: Let the message reader adapt the content of the email to dark mode.
[Suggested wording]: Support dark reader for the message pane, adapting the content of the message to be properly styled for dark mode.
[Links (documentation, blog post, etc)]: none yet