Obey theme switch in Gnome

[jrabensc]

Is your feature request related to a problem? Please describe.
In general, a dark mode function does not depend on the time but on the sunset in the current region. Hence, the automatic switch by time is not useful.

Describe the solution you'd like
Gnome supports changing the theme depending on the sunset in the current region. Dark should do the same. Windows does support a night light as well. Not sure how macOS handles this.

[fastaddons]

Thanks for reporting.

In Firefox for some of my addons I'm using CSS feature prefers-color-scheme feature for detecting if user requested dark mode:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
But somehow it was not working in my Thunderbird.

I will investigate or try to look for a better solution.
I will then add a new option to use "Scheduler" or "Managed by system".

[fastaddons]

So I've been looking into this and I found an issue in Thunderbird - the theme change that originates in operating system is not reported to the extension code.
I've reported it now here:
https://bugzilla.mozilla.org/show_bug.cgi?id=1682168

Let's see what they say about it.

[mherrmann3]

@fastaddons Thanks for explaining this issue and reporting it to bugzilla!
Now, ~2 years later, it's sad to see that this bug was not further addressed.
Btw: the title of this issue should be more general, as the limitation also affects other OS, e.g., Windows, or likely also other Linux desktop environments.

For now, my solution for automatic switching is to use a userContent.css, in which we can implement a prefers-color-scheme detector:

@media (prefers-color-scheme: light) {
  body {
    color: black; background-color: white
  }
}
@media (prefers-color-scheme: dark) {
  body {
    color: white; background-color: #1C1B22
  }
  :link {color: #8C8CFF}
  :visited {color: #FFADFF}
}

This solution was inspired by kb.mozillazine.org/White_on_black_-_Thunderbird, and I slightly modified it. It partly replaces Darko, but it's not supposed to work for messages using tables (newsletters, etc.), and it's not perfect for some other mails that make strong use of HTML formatting. For those cases, I switch on Darko.

---

Edit:
I found a better solution using the filter approach (which is at the core of Darko and @alisonatwork's alternative dark-mode addon donker; see her comment in a another Darko issue). But to not apply the filter to the many other elements in Thunderbird (e.g., settings, Add-ons Manager, Source view, etc.), we must only apply it to the #messagepane in the userChrome.css (not userContent.css), like so:

@media (prefers-color-scheme: light) {
  #messagepane {
    color: black; background-color: white
  }
}
@media (prefers-color-scheme: dark) {
  #messagepane {
    filter: invert(100%) hue-rotate(180deg);
  }
}

To revert the filter for images, we have to apply it again, but using the userContent.css:

@media (prefers-color-scheme: dark) {
  /* Undo inversion for images (to make them appear normal again) */
  .moz-text-html img {
    filter: invert(100%) hue-rotate(180deg) !important;
  }
}

which, for now, fully replaces Darko for me 😨

Note: For this solution to be applied, you need to

• set pref toolkit.legacyUserProfileCustomizations.stylesheets to True (in the Config Editor)
• install userChromeJS add-on

Also cool: this solution does not have the white flashes described in #18, which is a remaining issue of Darko.

The message panel (including the header) may still be white-ish (#E4E3EA) when no message is selected (see also #18) - it's the inverse of browser.display.background_color.dark (#1C1B22). To fix that, set this pref to #E4E3EA; if you instead want to have the same dark color as used in the folderTree and threadTree panel (#38383D), set it to #C6C6CB. Note that it will only be respected if browser.display.use_system_colors is false, i.e., the 'Use system colors' check box is unchecked (the one shown in @falkenhawk's comment annotated with a '2').

Since browser.display.background_color.dark also sets the background of the Source view (now to white-ish), we also need to add the following to the userContent.css inside @media (prefers-color-scheme: dark):

  #viewsource {
    background-color: #1C1B22 !important;
  }

---

Edit 2:
I also propose following additions to the userContent.css inside @media (prefers-color-scheme: dark):

  /* Also undo inversion for background images */
  [style*="background-image:"], [background*="."] {
	filter: invert(100%) hue-rotate(180deg) !important;
  }
  /* If an email supports dark and light themes (like from Pocket), enforce light theme (which will be inverted) */
  html[style*="color-scheme"] {
    color-scheme: light !important;
  }

The first addition should address #9 (undoing the inversion for background images).

PS: I wonder how to detect and deal with emails that already have some dark appearance. I guess this calls for more JS logic.

[fastaddons]

I can't believe it's been 2 years! I feel like I've build this addon just months ago :).
Anyway, thank you for investigating these things for me! I'll try to implement them in the upcoming release sometime this week.

I've been very busy with my other addons so my Darko wasn't getting a lot of attention. Also, since "Dark Reader" is now compatible with Thunderbird, I've lost a lot of motivation working it :(.

[mherrmann3]

Great, Juraj! I'm happy that you'll welcome those investigations. The only reason I spent time on this is because Dark Reader doesn't work in my Thunderbird, see related open issues. In my case (Thunderbird v102), the popup simply says "Loading, please wait".

While I appreciate Dark Reader in Firefox, I like the simple CSS customization that you took with Darko or that I took with userContent.css & userChrome.css. I believe that's sufficient here, because darkening text and HTML messages is much less complicated than a random website. Plus: we can darken any part of Thunderbird to our liking (for instance I also made the folderTree and threadTree darker).

[alisonatwork]

This is some good findings, @mherrmann3, thanks for the research! I'm especially interested in trying to find a way to consistently use the same "dark" color in my Donker extension as what Thunderbird would normally use for its dark background.

The tricky part about figuring out if a mail is already being sent in dark mode, is that they can basically set the color anywhere. For example, Steam sends dark mode emails by default, but annoyingly the background-color style on the body element (and several other elements) is #ffffff. And then only inside a <td>, 3 nested tables deep, do they eventually set bgcolor to #212429. I guess you could do some searching to find the first visible text and then step up the parents using window.getComputedStyle() till you found one that had a backgroundColor and test to see if it's dark enough to skip the inversion, but I'm not sure how reliable it would be.

For me, Steam is one of the very few senders that gives me dark mode email, so it's not a big deal for me to just click the toolbar button to de-invert it for just that email. This is perhaps the benefit of using an extension over just a stylesheet mod - it's easy to either click the button (like Donker) or add the sender to a "darklist" (like Darko).