N1LAF
12-19-2021, 12:35 PM
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/ (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.styleshee ts' 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/ (https://www.askvg.com/tip-restore-compact-mode-density-option-in-firefox-customize-window/)
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/ (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.styleshee ts' 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/ (https://www.askvg.com/tip-restore-compact-mode-density-option-in-firefox-customize-window/)