How to enable dark mode in Thunderbird 78 manually?

In W10 Settings, Personalization, Colors, I have the default app mode set to Light. If the Dark theme is enabled in TB Tools/Add-ons/Themes, it remains that way no matter if the default Window mode is Dark or Light. Do you see different results?

In W10 Settings, Personalization, Colors, I have the default app mode set to Light. If the Dark theme is enabled in TB Tools/Add-ons/Themes, it remains that way no matter if the default Window mode is Dark or Light. Do you see different results?

Thank you for the answer. I already tried that and the theme stays dark, that's right. But this dark theme is not the same as the "real dark mode" that's new in Thunderbird 78. For example, the background of plain text emails is still white, just like the editor window when composing a new email. That's not the case with the real dark mode. Also, the font color of Thunderbird is not white, but slightly darker. When the real dark mode is enabled, it's white.

Furthermore, with only the "Dark Theme", for example, the settings are still bright and not dark. The biggest advantage of the "real dark mode" for me is that the e-mails are also displayed dark (when reading and writing).

To have white text on a black background, or any other colors, change the settings in Options/General/Language & Appearance/Colors... The color of other elements, such as the text and background colors of the Threads and Folder Panes can be set with userChrome.css, of which there are many examples posted on this forum.

Thank you for the tip. I'm aware of this method, but then I have to change a lot myself. For example, so that the Thunderbird settings are also displayed in a nice-looking dark design. This takes a time, I think, and I wouldn't have had to do it if there was a way to manually activate this new Dark Mode. Just a checkbox...

I'm still considering whether to use this more elaborate method with the custom CSS file or to temporarily switch on Windows Dark Mode when I open Thunderbird. In my opinion both are not optimal solutions and I still hope that the possibility to switch on and off the dark mode manually will come with a future update.

A custom css works here in 78, but you may have to toggle the preference toolkit.legacyUserProfileCustomizations.stylesheets to true in Config. editor. Here is an example tested and working in TB 78:

/* Folder Pane font */
#folderTree > treechildren {
  font-size: 12pt !important;
  font-family: Verdana !important;
  background-color: lightgrey !important;
  color: navy !important;
}

/*  Threads Pane font */
.tree-rows {
    font-size: 12pt !important;
    font-family: Verdana !important;
}


/* Folder Pane bg color selected folder */
#folderTree  treechildren::-moz-tree-row(selected) {
  -moz-appearance: none !important;
  background-color: orange !important;
}

/* Folder Pane text color selected folder */
#folderTree  treechildren::-moz-tree-cell-text(selected) {
  -moz-appearance: none !important;
   color: red !important;
}

Thank you, I'll try that. A disadvantage of the method using the userChrome.css is also that I can't switch the dark mode on and off at any time. If I change the font color in the folder and thread pane to white via CSS, for example, I can't see the text when I switch the theme back to the default one.

It's a solution that you can work with, but it's not optimal, I think. But thanks again for the tips and the example :)

Is there a way to change the color of the scrollbar in the message pane? In the thread pane it's no problem and the theme already changed it to a dark scrollbar, but if I try to use the selector "#messagepane" and change the value of the css property "scrollbar-color", it doesn't work. If I open the dev console and click on "#document" --> and then on the html tag inside this message pane element (it's a plain text mail), there I can add this styling. But I don't know how to do this using my "userChrome.css" file and I also can't find anything online... I wish I could just use the dark mode, because there the scroll bar is dark.

To change the scrollbars in the Threads Pane, add this to userChrome.css:

scrollbar {
  -moz-appearance: none !important;
    background: orange !important;
    scrollbar-width: thin;
    scrollbar-color: grey orange;
}

To have matching scrollbars in the Message Pane, add this to userContent.css:

:root { 
    scrollbar-color: grey orange;
    scrollbar-width: thin;
}

See attached picture.

http://forums.mozillazine.org/viewtopic.php?p=14822184#p14822184

https://www.reddit.com/r/FirefoxCSS/comments/dpy1zt/darkthin_scrollbars_for_7001/

That works fine, thanks! I tried this in my userChrome.css, but I didn't know that I have to put it into a userContent.css.

The last issue I'm facing right now (hopefully) is that if I set the font color of the threadTree to white and then mark an email with a tag (e.g. by pressing the "1" key), it's text in the thread tree will always stay white and not, for example, change to red, because I tagged the email.

I use this CSS:

#threadTree treechildren::-moz-tree-cell-text
	color: #FFFFFF !important;
}

Without "!important" the color set by the tag is shown, but then also the original color of the theme applies which is not pure white. That's why I wanted to change it to white. When I open the dev tools, unfortunately I can't see the actual HTML and the CSS classes used for the thread tree content. I only see the thread tree "wrapper"... If I search for a text that occurs in one of my email subjects (shown in the thread tree), nothing is found. Do you know a CSS selector/rule to fix this (white color but still keep the color of my tags)?

I tried something that I found at https://gist.github.com/eriwen/757944 but that didn't work (or I did something wrong)

Here are a couple of alternate codes that might make a difference:

#threadTree treechildren::-moz-tree-cell-text {
-moz-appearance: none !important;
color: #CC0000 !important;
}

and

/*  Threads Pane font */
.tree-rows {
    font-size: 12pt !important;
    font-family: Verdana !important;
    color: #CC0000 !important;
}

I use css to color the cell and text for tagged messages. For the Important tag:

treechildren::-moz-tree-row(T_24label1)
{
  border-bottom: 1px solid #FFFFFF !important;
  background-color:  #ff004f   !important;
}

treechildren::-moz-tree-cell-text(T_24label1)
{
  color: #FFFFFF !important;
}

treechildren::-moz-tree-row(T_24label1, selected)
{
  background-color: #a2006d !important;
}

treechildren::-moz-tree-cell-text(T_24label1, selected)
{
  color: #ffff00  !important;
}

Thank you very much, the CSS lines for the tags/labels work well. I'm overwriting the tag colors that I specified in the settings with this CSS, of course, but I'll never change them again and so I guess it's fine. I also made the colors a bit brighter than the ones I specified in the settings. So they are better readable on the dark background.

This is what I added to my userChrome.css now:

#threadTree treechildren::-moz-tree-cell-text(T_24label1) { color: #FF2424 !important; }
#threadTree treechildren::-moz-tree-cell-text(T_24label1, selected, focus) { color: #FFFFFF !important; }

#threadTree treechildren::-moz-tree-cell-text(T_24label2) { color: #FF9900 !important; }
#threadTree treechildren::-moz-tree-cell-text(T_24label2, selected, focus) { color: #000000 !important; }

#threadTree treechildren::-moz-tree-cell-text(T_24label3) { color:  #02C402 !important; }
#threadTree treechildren::-moz-tree-cell-text(T_24label3, selected, focus) { color: #FFFFFF !important; }

#threadTree treechildren::-moz-tree-cell-text(T_24label4) { color: #0099FF !important; }
#threadTree treechildren::-moz-tree-cell-text(T_24label4, selected, focus) { color: #FFFFFF !important; }

#threadTree treechildren::-moz-tree-cell-text(T_24label5) { color: #E84DE8 !important; }
#threadTree treechildren::-moz-tree-cell-text(T_24label5, selected, focus) { color: #FFFFFF !important; }