Until recently the inspector had a background colour #dbc3a3 (tan) and a text colour #000080 (dark blue) as well as a font size of 17px. Those changes resulted from code for chrome documents as set out below. The colours and font size have reverted to the defaults as shown in the snapshot.

How do I need to change the code?

https://imgur.com/a/Vfnkopv

@-moz-document url-prefix("about:"), url-prefix("chrome://"), url-prefix("resource://"){
  :root {
      --in-content-page-color: #000080 !important;
      --in-content-text-color: #000080 !important;
      --in-content-page-background: #dbc3a3 !important;
      --in-content-box-background: #e2cfb6 !important;
      --in-content-deemphasized-text: var(--in-content-text-color) !important;
      scrollbar-color: #6495ed #d9d9d9 !important; 
      --background-color-box: var(--in-content-page-background) !important;
      --text-color: var(--in-content-text-color) !important;      
      color:var(--in-content-text-color) !important;
      --background-color-canvas: var(--in-content-page-background) !important;
      --table-row-background-color-alternate: var(--in-content-box-background) !important;    

  menulist > menupopup{ background-color: var(--in-content-page-background) !important; }}}
  
  @-moz-document url-prefix("chrome:") {
  html, body, tr { background-color: #dbc3a3 !important;
    color: #000080 !important;
    font-size: 17px !important; }
  div { background-color: #dbc3a3 !important;
    color: #000080 !important;
    font-size: 17px !important; }
  tr:hover { background-color: #b3d1ff !important; }
  tr.odd:hover { background-color: #b3d1ff !important; }
}

I am not sure how much of the last stanza applied to the inspector.

At some point recently, the background colour of about:config started changing to white when my search reaches the third letter. Below is the code in userContent.css. What do I need to add?

@-moz-document url-prefix("about:"), url-prefix("chrome://"), url-prefix("resource://"){ :root { --in-content-page-color: #000080 !important; --in-content-text-color: #000080 !important; --in-content-page-background: #dbc3a3 !important; --in-content-box-background: #e2cfb6 !important; --in-content-deemphasized-text: var(--in-content-text-color) !important; scrollbar-color: #6495ed #d9d9d9 !important; --background-color-box: var(--in-content-page-background) !important; --text-color: var(--in-content-text-color) !important; color:var(--in-content-text-color) !important; }

I have created a standard hover background which, using various stanzas, applies to everything except the toolbar bookmark items and buttons. The following code doesn't have the desired effect on bookmarks. What will? The browser toolbox only shows the main window so I have improvised.

toolbarbutton.bookmark-item(hover) { background-color: #6495ed !important; }

I can't think what to use for toolbar buttons such as UBlock Origin.

For some time the colours of the popup on about:addons has had the native colours (black on white) instead of the colours set in userContent.css. The addons page itself still has the colours set in the css file.

I opened the Browser Toolbox and disabled popup auto-hide but I wasn't able to identify the selector(s) to use.

This is my code :

@-moz-document url-prefix("about:"), url-prefix("chrome://"), url-prefix("resource://"){ :root { --in-content-page-color: #000080 !important; --in-content-text-color: #000080 !important; --in-content-page-background: #dbc3a3 !important; --in-content-box-background: #e2cfb6 !important; --in-content-deemphasized-text: var(--in-content-text-color) !important; scrollbar-color: #6495ed #d9d9d9 !important; /*var(--in-content-text-color) var(--in-content-page-background) !important;*/ color:var(--in-content-text-color) !important; }

What do I add to change the colours of the popup to conform with the page itself?

The question about checkboxes inspired me to try to change the colour of unchecked checkboxes in Clear Recent History (ctl+shft+del) in History > Clear Recent History.

I found the menu command in the Browser Toolbox and I used that to identify the modal. On my system is was the 343rd menuitem. My code doesn't work but I don't know why.

#menu-history-clear-recent-history{ .checkbox-check { appearance: none !important; background: #e2cfb6; } }

I have a folder of bookmarklets. They all have the same favicon, i.e. the default (globe) icon. It would be useful to change at least two of them to distinctive icons.

I copied code posted recently on another forum. It is only partly effective in that the default icon disappears but, instead of the icon I have named, there is a faint orange blur. The icon I have named is the Facebook icon, a white f letter on a blue background. I began with an .ico file but changed it to a .jpg file, hoping that would help; it didn't. I also tried changing the size from 1616 to 2424 and 50*50, to no avail.

The code is below.

#personal-bookmarks .bookmark-item[scheme="javascript"][label="zap fb"] .toolbarbutton-icon, #personal-bookmarks .bookmark-item[scheme="javascript"][label="zap fb"] .menu-iconic-icon { width: 0 !important; padding-right: 16px !important; background-image: url ("fb16.jpg") !important; }

I see a double separator below the "Copy link" option in the link context menu seen when you right-click a link. I tried commenting out all the code I have relating to context menus and it's still there.

I have tried adding the separator id (#context-sep-copylink) to code I have to hide various context menu items and that was ineffective.

The text in the menu isn't as large as the screenshot suggests.

SOLVED. It was the separator sendlinktodevice. The other code was hiding the separator below copy link in the image context menu. The double line was just an irritant, not a practical problem, but I'm glad it's gone. Thanks to those who replied.