Photon spirit Autor: arnofly

Use a light context menu with all the themes

If you prefer a light context menu, you can apply the following CSS rules in a userChrome file. This file allow user to customize the user interface of a target Firefox profile. This CSS rules will be applied on all the themes you will use, not only the current theme. By default, this file is not applied, so you have to follow the instructions below to see the changment.

How to customize the appearance of Firefox and activate it?

1. Go to about:support and click on the button to open your profile directory
2. Create the "chrome" directory in your profile directory
3. Create userChrome.css file in the chrome directory
4. Open the new file with your favorite text editor, like VS Code or Notepad++
5. Copy/paste the code (see after the list) in this file and save the file
6. Go to about:config, search the variable toolkit.legacyUserProfileCustomizations.stylesheets and change the value to true
7. Restart Firefox to apply the change

More information on this page:
https://www.userchrome.org/adding-style-recipes-userchrome-css.html



Copy/paste the following code at the step 5 :

/*** Photon-like Menu Colors (25 Oct 2021) ***/

/* Bookmarks Toolbar folders */
#PersonalToolbar menupopup,
/* Right-click context menus */
#mainPopupSet menupopup,
/* Top menu bar on Windows (not sure about others) */
#toolbar-menubar menupopup,
/* Sidebar/Library bookmark/history context menus */
#placesContext,
/* Address bar context menu (2021-10-25) */
#urlbar-input-container menupopup {
/* Text color */
--menu-color: #000 !important;
--arrowpanel-color: #000 !important;
--panel-color: #000 !important;
/* Background color */
--menu-background-color: #f9f9fb !important;
--arrowpanel-background: #f9f9fb !important;
--panel-background: #f9f9fb !important;
/* Border color (if any) */
--menu-border-color: #cfcfd8 !important;
--arrowpanel-border-color: #cfcfd8 !important;
--panel-border-color: #cfcfd8 !important;
/* Hovered/expanded item background color */
--menuitem-hover-background-color: #e0e0e6 !important;
--button-hover-bgcolor: #e0e0e6 !important;
/* Disabled items text color and hovered background */
--menu-disabled-color: rgba(21, 20, 26, 0.4) !important;
--menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4) !important;
}