Csdrhrt

I am not a fan of the bookmarks folder colors in Firefox 57 default theme:

In prior version the folders were colored in vanilla color:

Is there anyway to get that color back in Firefox 57?

According to this Reddit post:

You can load custom images by adding this to your userchrome:

.bookmark-item[container] { list-style-image: url( /* url goes here */
); }

Easiest way of using custom images is using a base64 encode string as
the url. Here's a monochrome chrome icon as an example:
https://pastebin.com/mF3EpcFu

You can use something like www.base64-image.de to convert your own
files into base64.

Another way, also based on userChrome.css:

/* Colored folders for bookmark sidebar, toolbar, menu button */

  /* Standard folder */

#bookmarks-view treechildren::-moz-tree-image(container),

#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,

#PlacesToolbarItems menu[container="true"] .menu-iconic-left,

#BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {

  fill: #e8bb00 !important; /* slightly muted gold */

}

  /* Live Bookmark (RSS Feed) */

#bookmarks-view treechildren::-moz-tree-image(container, livemark),

#PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,

#PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,

#BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {

  fill: orange !important;

}

  /* Smart bookmark folder */

#bookmarks-view treechildren::-moz-tree-image(container, query),

#PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,

#PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,

#BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {

  fill: #69c !important; /* similar to blue smart folder color */

}

  /* These "containers" are SVG in the sidebar, not yet on the menu */

#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {

  fill: olive !important;

}

#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {

  fill: olive !important;

}

#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {

  fill: olive !important;

}

This solution comes from here.

More generally, userchrome.org seems to be a valuable source of information (and recipes) about userChrome.css.

1. Download this archive and extract all contents into firefox's chrome folder (%APPDATA%MozillaFirefoxProfiles<your-profile>chrome (create if it doesnt exist))




2. If you don't have a userChrome.css file, rename userChrome-STARTER.css to userChrome.css. If you do, copy the line from userChrome-STARTER.css to the top of your userChrome.css file.




3. Restart firefox, you will now have the old folders back.

Source

1. I took the 200px version of https://commons.wikimedia.org/wiki/File:Icons8_flat_folder.svg:

2. Changed the size to 50px and added a gradient:

3. Converted it to Base64 at https://www.base64-image.de/.



4. 
   

   Added this to <FF profile folder>/chrome/userChrome.css:

   
   
   

   /* From: https://superuser.com/questions/1268367/how-to-get-back-the-vanilla-bookmarks-folder-color-in-firefox-57/1348373#1348373 */
   
   
   
   .bookmark-item[container]
   
       {
   
       list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAABJ0AAASdAHeZh94AAAAB3RJTUUH4QgTBiMo7IFyHgAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4yMfEgaZUAAAMWSURBVGhD7ZNLTxRBFIU7xhW6MDiRnSTKOPMXdOcef4hbf4EL3bBjbQKEuIGNgcTEnQsJ85D3zPCSx2SYACIgvnWw63pqUmUqlaruLhhCLfokX27VrTqde6YgSJUqVapUqS5CraHgARsJBtlwMEYjwXgcuDvKRoNbwu6HwuHgOQZjGJBcYENB1Zswp0PBI9OQScEL+hEGLzFpGtCF9su8CHrEJy9H+EUr7YFeXiWauEH0OnMm2JueGpVyTzsFm7r7hN7duS3GjBf/06DpK0Q73URNDOURrNndYrvXH4tRo8XGu6p00kUU4lXOC7NUuVb7cWcCtpNhp1O9D8W4doVve2t0jCAtGE+BrDq2vs5fyzoO/S7fc3bwMoXsKzGuXazQV6cjBPkDk8pvbd9J+I8ikXv1TL3TQJDpvk0xrl1sOtugQwT5CZPkl4K+PwtR3+A/mKlK6jxItiHGtasd5ABBvsP0A/Aq1xL1TO279GyY7vLgcr3tEmQfQb7CpPJNq6a1aa/21bXtXhxbSYMUsnXaQ5ATmL4I+FpF76n35Frfy7VeXdls/7PXxbh2sXKuSrsIcgxTp/gcUU3oZ+p+A0EwoxjXrnaQJoIcwpSEo5i9rSeRZ7bv8KrywSVIA0EOYDoPnyw9U19i86h13SVIHUH2YToPHw29JHCf6tW/s+YSZBtBdmG6TPa0tdyvugTZRJAmTD6y4hJkA0EaMPnIskuQdQSpw+QjNZcgawiyBZOPVF2CrCDIBkw+UnEJsowg6zD5yJJLkCqCrMLkI4suQSoIsgyTiVrC3kWx4BJkEUGqMHEqovrCvEuQBQRZgikJi4ZeFK73deZcgswhyDxMnAVR1b1E38f1O8Fs0iClXIVmEGSWm8CcqOpeEnVH1k4zk6GwmKuIce0Ki/lJKiPIe5hUZgSmftRa+uIw3TX28CKl/IQY1y5c6qcSgpRgiqKsVduZfq735D6O/3fbQfrFuNEKC9cGWDHDqJTBB/yBzxQWbz4TYyYTUt8Pi/cGWTk/RuX8+GXCZ+CztDCTGC9VqlSpUqXqoILgH3yamKaF0cswAAAAAElFTkSuQmCC') !important;
   
       }
   
   

   
   



5. Restarted FF.




6. Enjoyed!