How to change Thunderbird like Gmail Basic HTML view.(userChrome.css)

Gmail's basic HTML view has gone to the Google graveyard. RIP

So I installed Thunderbird and changed its UI color like Gmail's basic HTML view

You can do this by editing userChrome.css!



Change Thunderbird like Gmail Basic HTML view


Config editor


To enable userChrome.css in Thunderbird,

search "toolkit.legacyUserProfileCustomizations.stylesheets" in the Config Editor and set it TRUE.



Create chrome folder and userChrome.css file in Profile folder.


[Help > Troubleshooting Information]

Under the Application Basics section, find the Profile Folder row, then click on Open Folder.

Create a new folder named "chrome" and Create a new file named "userChrome.css" in it.



Edit userChrome.css


Open "userChrome.css" and copy paste these. After that, save it and restart thunderbird.


/* Message list color and border */
tr{
background-color: #eaf1fb!important;
}
td{
border-bottom:1px solid #cccccc!important;
}

/* Message list subject color */
.subjectcol-column{
color: #0033cc!important;
}

/* Message list UNREAD */
tr[data-properties~="unread"]{
background-color: #ffffff!important;
}

/* Message list SELECTED */
tr.selected {
color:#000000!important;
font-weight:bold!important;
}

/* Unread count */
.folder-count-badge{
font-size:1em!important;
}
.unread-count {
background-color:transparent!important;
color:#0033cc!important;
}

.unread-count:before {
content:"("!important;
color:#0033cc!important;
}
.unread-count:after {
content:")"!important;
color:#0033cc!important;
}
.name{
margin:0 0 0 7px!important;
flex:unset!important;
margin-inline: unset!important;
}

/* Hide address book icon */
.recipient-address-book-button{
display: none !important;
}

/* Hide folderTree icon */
#folderTree li > .container > .icon{
display: none!important;
}

/* Folder name color*/
#folderTree li[is="folder-tree-row"]:not([aria-expanded="true"]) > .container > .name{
color: #0033cc!important;
text-decoration:underline;
}

/* Label name color */
#folderTree li[is~="folder-tree-row"]:not([aria-expanded="true"]):not([data-folder-type]) > .container > .name{
color: #008000!important;
}
#folderTree li[is~="folder-tree-row"]:not([aria-expanded="true"]):not([data-folder-type]) > .container > .unread-count {
color: #008000!important;
}
#folderTree li[is~="folder-tree-row"]:not([aria-expanded="true"]):not([data-folder-type]) > .container > .unread-count:before {
color: #008000!important;
}
#folderTree li[is~="folder-tree-row"]:not([aria-expanded="true"]):not([data-folder-type]) > .container > .unread-count:after {
color: #008000!important;
}

/* Hide Search placeholder */
span[slot="placeholder"]{
display:none!important;
}