Method for stylizing the context menu (Firefox CSS)

userChrome.css

/* ----------------------------------------------------------
Styling Firefoxs context (right-click) menu
- this will target all context menus, including the menubar, and drop downs.
- If you want this to only apply to the context menu activated within webpages you can specify it, such as: #contentAreaContextMenu
-----------------------------------------------------------*/

/*
Using your own defined variables makes switching styles/colors much easier to manage
*/

:root, body, * {
  
--uc-background-color: rgba(28, 27, 34,1);
--uc-border-color: rgba(28, 27, 34,0.5);
--uc-text-color: rgb(255, 255, 255);
--uc-border-radius: 10px;
--uc-selected: rgba(0,0,0,1);
--uc-hover: rgba(0,0,0,0.7);
}

/*
Example of removing context menu items below;
Refer to SMW for an all in one place reference-library: https://github.com/stonecrusher/simpleMenuWizard
*/

#context-take-screenshot
#context-sep-screenshots,
#context-sendimage,
#context-setDesktopBackground,
#context-sep-setbackground,
#context-openlinkinusercontext-menu
    {
        display: none !important;
    }

#context-pocket,
#context-savelinktopocket,
#tabContextMenu #context_duplicateTab,         
#tabContextMenu #context_duplicateTabs,
#tabContextMenu #context_bookmarkSelectedTabs
    {
        display: none !important;
    }

/*
Apply your variables, style, color, etc, to the context menu
*/

menupopup, panel {
  color-scheme: light dark;
  --panel-background: var(--uc-background-color) !important;
  --panel-color: var(--uc-text-color) !important;
  --panel-border-radius: var(--uc-border-radius) !important;
  --panel-border-color: var(--uc-border-color) !important;
  --panel-shadow: 0 0 var(---uc-border-color) hsla(0,0%,0%,.2); 
}

menuitem:hover{
  background-color: var(--uc-hover) !important;
  color: var(--uc-text-color) !important;
 }

menu:where([_moz-menuactive="true"]:not([disabled="true"])),
menuitem:where([_moz-menuactive="true"]:not([disabled="true"])){
  background-color: var(--uc-selected) !important;
  color: var(--uc-text-color) !important;
}

This is the outcome on linux.

This is it on Windows, with different color for light mode. You can have it auto adjust to light/dark mode as well with media queries. See FF ULTIMA for an example

Brother, thank you so much for this theme. For the life of me I couldn't get the text color to have a higher contrast against the background no matter other premade themes and I've worked with CSS before, I'm familiar with it but for some reason the text would just remain so pale it was barely visible in dark mode. I'll look into how you've approached it and try to understand it better, but thank you!