Thunderbird 60+ Dark Theme Improvements

userChrome.css

/*
UPDATE: Bad news... it looks like my system-wide Windows 10 dark theme was doing a whole lot more to Thunderbird than I realized. The native dark theme in Thunderbird 60 actually does very little--only darkening the tab-bar and toolbars. To get the full dark theme effect, you would ALSO need to install a customized Windows 10 dark theme. I use the BIB theme here...
https://www.deviantart.com/niivu/art/BIB-676860381
... after installing the BIB Windows theme (or maybe some other dark system-wide theme), you can use the userChrome.css and userContent.css files to fixup the few remaining bright spots.

Original description...
Fixes several bright spots left in the new native dark theme in Thunderbird 60... most noticeably the splitter bars and calendar.
Also increases the font size and spacing, adds a slight zebra striping to the message list, and brightens unread items.
Not sure if this can be wrapped up into a theme or extension anymore.

Add this file to a folder named "chrome" in your user profile folder. On Windows, this will probably be something like...
C:\Users\YourName\AppData\Roaming\Thunderbird\Profiles\abc123.default\chrome
... and if you haven't done so already, you'll probably need to create the "chrome" folder and this file.
*/


/* Increase font-size all-around */
* {
	font-size: 10pt !important;
}

/* Darken splitters */
splitter, #attachmentView {
	border-color: hsl(240, 1%, 20%) !important;
}
.main-header-area {
	border-color: hsl(240, 1%, 15%) !important;
}

/* Darken mini calendar */
minimonth, minimonth * {
	background-color: hsl(240, 1%, 20%) !important;
	border-color: rgb(36, 36, 36) !important;
}

/* Darken notifications and warnings */
notificationbox > * {
	background-color: #555 !important;
	color: #ddd !important;
}

/* Brighten the quick-filter bar, which is obnoxiously full-black */
#quick-filter-bar {
	background-color: #333 !important;
}

/* Darken the calendar */
window {
	--viewColor: #ccc !important;
	--viewBackground: #222 !important;
	--viewMonthCurrentBackground: #333 !important;
	--viewWeekendBackground: #262722 !important;
	--viewBorderColor: #222 !important;
	--viewMonthOtherBackground: #111 !important;
	--viewMonthDayOtherBackground: #111 !important;
	--viewMonthDayOtherLabelBackground: #111 !important;

	--viewTodayDayLabelBackground: #22222B !important;
	--viewTodayLabelColor: #fff !important;
	--viewHighlightBorderColor: #377ca8 !important;

	--viewTodayLabelBackground: #947553 !important;
	--viewTodayLabelSelectedBackground: #947553 !important;
	--viewTodayBorderColor: #947553 !important;
	--viewTodayLabelSelectedColor: #FFFFFF !important;
	--viewTodayBackground: #292929 !important;

	--viewMonthDayOffLabelBackground: #333 !important;

	--viewMonthDayBoxLabelColor: #B1B1B3 !important;

	--viewMonthDayBoxSelectedBackground: #5f99ce !important;
	--viewDayBoxSelectedBackground: #3973a8 !important;
	--viewDayBoxOtherSelectedBackground: #3973a8 !important;
	--viewMonthDayBoxSelectedColor: #FFFFFF !important;
}

/* Increase the height of list items */
treechildren::-moz-tree-row {
	height:1.6em !important;
}

/* Highlight list items with a blue border and don't change background color */
treechildren::-moz-tree-row(selected) {
	background-color: inherit !important;
	border-color: #5f99ce !important;
}

/* Zebra stripe the mail messages list */
#threadTree treechildren::-moz-tree-row(odd) { 
	background-color: hsl(240, 1%, 17%) !important;
}

/* Make unread items standout more as full-white */
treechildren::-moz-tree-cell-text(unread) { 
	color:#fff !important;
}

userContent.css

/*
UPDATE: Bad news... it looks like my system-wide Windows 10 dark theme was doing a whole lot more to Thunderbird than I realized. The native dark theme in Thunderbird 60 actually does very little--only darkening the tab-bar and toolbars. To get the full dark theme effect, you would ALSO need to install a customized Windows 10 dark theme. I use the BIB theme here...
https://www.deviantart.com/niivu/art/BIB-676860381
... after installing the BIB Windows theme (or maybe some other dark system-wide theme), you can use the userChrome.css and userContent.css files to fixup the few remaining bright spots.

Original description...
Forces messages to be displayed with light text on a dark background, with blue links.

Add this file to a folder named "chrome" in your user profile folder. On Windows, this will probably be something like...
C:\Users\YourName\AppData\Roaming\Thunderbird\Profiles\abc123.default\chrome
... and if you haven't done so already, you'll probably need to create the "chrome" folder and this file.
*/

* {
	color: #CCCCCC !important;
	background-color: #333333 !important;
	border-color: #333333 !important;
}

a, a * {
	color: #00ADEE !important;
}

a:hover, a:hover * {
	color: #0688B8 !important;
}
img {
	filter: brightness(0.5);
}

UPDATE: Bad news... it looks like my system-wide Windows 10 dark theme was doing a whole lot more to Thunderbird than I realized. The native dark theme in Thunderbird 60 actually does very little--only darkening the tab-bar and toolbars. To get the full dark theme effect in the screenshots below, you would ALSO need to install a customized Windows 10 dark theme. I use the BIB theme here...
https://www.deviantart.com/niivu/art/BIB-676860381
... after installing the BIB Windows theme (or maybe some other dark system-wide theme), you can use the userChrome.css and userContent.css files to fixup the few remaining bright spots.

Original post...
Fixes several bright spots left in the new native dark theme in Thunderbird 60... most noticeably the splitter bars and calendar.
Also increases the font size and spacing, adds a slight zebra striping to the message list, and brightens unread items.
Not sure if this can be wrapped up into a theme or extension anymore, so sharing here for now!

Add the files to a folder named "chrome" in your user profile folder. On Windows, this will probably be something like...
C:\Users\YourName\AppData\Roaming\Thunderbird\Profiles\abc123.default\chrome
... and if you haven't done so already, you'll probably need to create the "chrome" folder and the files.

Hi! Thanks for this improvements.

There is any additional configuration to de/activate besides enabling the dark theme and placing these files on the "chrome" folder? I ask this because I'm getting this result on the main window:

Is worth to mention that both the reading pane, and the message tabs are working correctly...

Thanks in advance!

First of all: thank you so much for sharing, @gazugafan
Sadly, I get the same look as @antonio-gil.
I want to contribute to improve this, but for that I need to know where did you find the right selector's names to use.

Same problem here as antonio-gil.
Thank you @gazugafan for you effort and sharing!

@antonio-gil @paulequilibrio @plasmac0r Weeiirrd. It almost looks like you don't have the native dark theme enabled... like you're applying the customizations above over top of the default light theme. You guys are on Thunderbird 60, and the native dark theme works to begin with (without the userChrome and userContent files above)?

Just to make sure... you enable the native dark theme under Add-Ons > Themes. It should look like this...

I'm using a general Windows 10 dark theme as well, but I don't think that would have anything to do with it.

@paulequilibrio You can find the selectors by using the developer tools. It's under Tools > Developer Tools > Developer Toolbox (or Ctrl + Shift + I)

Well, in my case these are my theme settings:

And this is the version of TB that I'm running (at least in this PC, albeit in my home PC Thunderbird is updated to the latest version as well):

a

You guys are on Thunderbird 60, and the native dark theme works to begin with (without the userChrome and userContent files above)?

Well, as far as I can tell, I guess that in my case the theme is "working"-ish... But as the only changes that I've noticed are on the top bar of the application (menu, and mail bars) I'm not quite sure about it.

Thanks in advance.

@gazugafan : I'm experimenting something even weirder :

• My thunderbird v60 native dark theme seems to behave as you said. Borders are blacks, but the content stays white, as if the theme didn't control it at all :

• Putting your css in 'chrome' folder doesn't change anything at all.

It is a Windows 10 OS, and Thunderbird in version 60.

Very strange.

Oh wow... I just installed Thunderbird 60 on a new VM to double-check what the new native dark theme looks like on a fresh copy of Windows. It looks like it does next-to-nothing. It only changes the tab-bar and toolbars...

I guess my general Windows 10 dark theme was doing a whole lot more to Thunderbird than I realized. I switched Thunderbird to the dark theme right away and saw that almost everything was dark and looking good except for the calendar and a few odd bright spots. That makes a lot more sense now that I realize the native dark theme wasn't much of a dark theme at all. Here's what the native Thunderbird dark theme looked like for me out-of-the-box (with my general Windows dark theme)...

If you're on Windows and obsessively dedicated to dark themes like I am, you could install a custom Windows dark theme. I'm using BIB from here...
https://www.deviantart.com/niivu/art/BIB-676860381
... you have to patch some system DLLs, but it's not too big of a deal. Then, the userChrome.css file above will fixup the few remaining bright spots.

Otherwise, someone could potentially build on the userChrome.css file above to accomplish the same thing. You'd need to use the built-in Thunderbird developer tools (Ctrl+Shift+I) to figure out the right CSS selectors and such. I don't have the time to put into that right now, though :(

Sorry for the bad news. Still hoping TT DeepDark can get updated eventually!

@gazugafan It is not so a bad news for me : you found an answer to my questions ! I didn't understand why my "dark" theme was white... because Mozilla just didn't create a real dark theme :)
I will follow your advice to inject some darkness in the whole Windows 10.
Thanks for your help, really appreciated this!

Uhm, I also "found" a repo with some themes for Thunderbird that behave well with the latest version of the client (even if they quite "old"), I'm guessing that it could be worth to take a look (they could be useful):

Thunderbird Monterail

I've made a quick test with the "Full Dark" theme, and discovered that it works well with @gazugafan 's userContent.css:

Main Window:

Message Window:

(Edit: wording)

@gazugafan Thank you very much, works like a charm !!!

Thank you very much for this peace of code!

I've been looking for something like this like mad, because TB's native dark mode does not darken the calendar. I've copied the appropriate part of your code to my userChrome.css and it works like a charm - for 99%... The last percent that is missing to be perfect is Lightning's weekly and daily view: those pages are darkened only for the defined working hours. The non-working hours stay white, and in order to darken those hours as well, you need to define your working hours going from midnight to midnight. Then your leisure hours are darkened in the same colour as your working hours.

It would be nice if there was a pref that could darken the non-working hours in a slightly different colour then the working hours.

@wehkah Actually, I think the latest version of Thunderbird's dark theme takes care of the calendar now. I've since removed the calendar stuff from my userChrome.css, and it's all looking good! Here's what I'm using currently, if you're interested...

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 


/* Increase font-size all-around */
* {
	font-size: 10pt !important;
}

/* Darken splitters */
splitter, #attachmentView {
	border-color: hsl(240, 1%, 20%) !important;
}
.main-header-area {
	border-color: hsl(240, 1%, 15%) !important;
}

/* Increase the height of list items */
treechildren::-moz-tree-row {
	height:1.6em !important;
}

/* Highlight list items with a blue border and don't change background color */
treechildren::-moz-tree-row(selected) {
	background-color: inherit !important;
	border-color: #5f99ce !important;
}

/* Zebra stripe the mail messages list */
#threadTree treechildren::-moz-tree-row(odd) { 
	background-color: hsl(240, 1%, 20%) !important;
}

/* Change font color of unread messages and folders to blue */
treechildren::-moz-tree-cell-text(unread), treechildren::-moz-tree-cell-text(hasUnreadMessages-true) {
    color: #00ADEE !important;
}

/* Brighten the quick-filter bar, which is obnoxiously full-black */
#quick-filter-bar {
	background-color: #333 !important;
}

I think the latest version of Thunderbird's dark theme takes care of the calendar now.

If you are referring to TB68+, you may be right. But I need to stick with TB60, because Version 68 has a nasty bug in its CalDAV use.

TB60, on the other hand, does not darken the calendar, but thanks to your code, it does! :)

If you're using v60, have you tried the TT DeepDark addon? The only reason I dug into this to begin with was because the v68+ upgrade of TT DeepDark is still being developed.