Introducing the Anti-Proton Firefox Theme

[N1LAF]

Recent versions of firefox has changed the UI (User Interface) color schemes, now in line with the boring original Windows 10 mindset. The default 'light' version leaves little contrast between the menu area and workspace. The dark scheme also changes some websites to a dark background (Twitter, DuckDuckGo as examples, at least DuckDuckGo has option to change background scheme). What is missing is to have a dark menu area and light workspace area.

We have a solution.

I have developed a userChrome.css file that will fix the UI woes. Easy to customize to your liking.

First step is to change Firefox theme, if needed, to the default light theme.

Second is to enable userChrome.css use.

This Link will give instructions on how to do the second step:https://www.askvg.com/tip-new-working-method-to-restore-classic-theme-and-ui-in-firefox-91-and-later-versions/

When this is done, create file userChrome.css in the chrome folder, and copy the following contents to userChrome.css file. userChrome.css is a simple text file.

/* Anti-Proton UI Theme,Mozilla Firefox, by N1LAF - Begin */

/*   -- quick instructions --
Use default light theme first 
about:config
Set: 'toolkit.legacyUserProfileCustomizations.stylesheets' preference to 'true' 
about:support > Profile Folder > Open Folder
Create folder 'chrome'
in folder 'chrome', create file 'userChrome.css'
copy contents to 'userChrome.css'
*/

/* bookmark menu spacing  */
menupopup > menu, menupopup > menuitem{
 padding-block: 2px !important;
 min-height: 0px !important;
 border: black;
}


/* ----- Anti-Proton Customization ----- */

/* title bar and nav bar colors */
.titlebar-color {                                                                     
color: white;  /* for Windows colors, replace 'white' with '-moz-accent-color-foreground' */
background-color: black;  /* for Windows colors, replace 'black' with '-moz-accent-color' */
}

/* background navbar, bookmarks bar */
#navigator-toolbox > toolbar, .browserContainer > findbar, #browser-bottombox {
background-color: black !important; /* for Windows colors, replace 'black' with '-moz-accent-color' */
}


/* -- tab customization -- */
.tab-background {
border-radius: 0px 0px !important;
margin-bottom: 0px !important;
}

.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background{
background-color: #444444;
}


/* -- Bookmark customization -- */
#PlacesToolbarItems {                                          /* status = DEFAULT */
color: white !important;                                       /* text color */
}

toolbarbutton.bookmark-item:hover {                            /* status = HOVER */
background-color: #555555 !important;                          /* background color */
/* color: rgb(64,64,64) !important;  */                        /* text color */
}



/* -- icon color customization -- */
.toolbarbutton-icon {
  fill: white;
}

/* bookmark modification */
#PlacesToolbarItems  .toolbarbutton-icon {
  fill: #fffdd0;
}

:root{
--arrowpanel-menuitem-padding: 2px !important;
}

/* --- for Light drop down menus, delete all below --- */

/* bookmarks toolbar dropdown menu*/
#PlacesToolbar menupopup[placespopup="true"] {
  --arrowpanel-background: #111111 !important; 
  --arrowpanel-color: #fffdd0 !important;
}

/* menu separator */
#personal-bookmarks menuseparator {
  -moz-appearance: none !important;
  background-color: #555555 !important;
  height: 1px !important;
  margin: 2px 5px !important;
}

/* Anti-Proton UI Theme, Mozilla Firefox - End */

}[/CODE]

Note: Compact mode was from different method.

Compact Mode:https://www.askvg.com/tip-restore-compact-mode-density-option-in-firefox-customize-window/

[N1LAF]

Welcome Firefox version 133

With this update, my menu bar was unreadable, but Compact mode was still intact. Before I launched into patching the userchrome file, I explored the "Firefox Color" option. It works well, I was able to restore the menu bar, and to customize the menus, bookmarks, and user interface colors, eliminating the need to customize the userchrome file, or any other anti-proton theme methods.

To add Firefox colors, open application menu (the three horizontal bars), click on "Add-ons and themes", then scroll to end of page. Click on "Build your own theme with Firefox Color.". Install "Firefox color", and tweak away, and you can save your theme, and even share it if you like.