Enable the use of userChrome.css

Set toolkit.legacyUserProfileCustomizations.stylesheets to true in about:config. Below is how to do it.

Go to about:config in the address bar. Find toolkit.legacyUserProfileCustomizations.stylesheets. Switch its parameter to true.

Create userChrome.css file

  1. Open about:support in the the address bar.

  2. Click on “Profile Folder” -> “Open Folder”

  3. Create a sub-folder named “chrome”

  4. Change into the new folder

  5. Create a file named “userChrome.css”

Add css config

/* this set the color of the active tab */
.tab-background[selected="true"] {
    background-color: #458588 !important;
    background-image: none !important;
}

/* this set the color of the text of the title of the active tab */ 
   
.tab-label[selected="true"] {
    color:#ffffff !important;
}

/* this sets the color of the line above the active tab */
.tab-line[selected="true"] {
    background-color : red !important;
}


/* text color of NOT selected tab */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.tabbrowser-tab:not([selected]) {
  color: red !important;
}

My current

.tab-background[selected="true"] {
    background-color: #458588 !important;
    
    background-image: none !important;
}

#TabsToolbar .tabbrowser-tab[selected] {
    color: #f0f0f0 !important;
    font-weight: bold !important;
}