You can customize the theme style with the following code in your userChrome.css
About the userChrome.css:
This file sets the display rules for various elements in the Firefox user interface and is located in the sub-folder called chrome in your profile folder.
~/Library/Application Support/Firefox/Profiles/xxxxxxx.default/chrome/
The file does not exist by default, so you need to create it before you can start adding your preferences. There's actually an example file that exists by default, called userChrome-example.css. Basically, you can just rename that file by removing the -example part.
Important: Include the code above the
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
code linie from the userChrome-example.css
/* Combined Stop/Reload/Go buttons inside the Location Bar - Firefox 3.6 only */
@import url("chrome://browser/skin/customization/awesomebar-stop-reload.css");
/* Location Bar History dropmarker - Firefox 3.6 only */
@import url("chrome://browser/skin/customization/awesomebar-history-dropmarker.css");
/* Back-forward buttons dropmarker */
@import url("chrome://browser/skin/customization/back-forward-dropmarker-visible.css");
/* Search Bar favicons */
@import url("chrome://browser/skin/customization/search-favicons.css");
/* Toolbar favicons (site icons) */
@import url("chrome://browser/skin/customization/toolbar-favicons.css");
/* RSS indicator like Safari */
@import url("chrome://browser/skin/customization/RSS-indicator-blue.css");
/* RSS indicator orange */
@import url("chrome://browser/skin/customization/RSS-indicator-orange.css");
/* Tabs with favicons (site icons) */
@import url("chrome://browser/skin/customization/TabStyle-favicon-visible.css");
/* Tabs close buttons always visible - Firefox 3.6 only */
@import url("chrome://browser/skin/customization/TabStyle-close-button-visible.css"); */
/* Tabs with favicons + different order: Close button, favicon and text */
@import url("chrome://browser/skin/customization/TabStyle-closebutton-favicon-text.css");
/* Tabs with favicons + different order: Favicon, text and the close button on the right side */
@import url("chrome://browser/skin/customization/TabStyle-favicon-text-closebutton.css");
/* Pie Chart throbber - Firefox 3.7 only */
@import url("chrome://browser/skin/customization/pie-chart-throbber.css");