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;
}