This sort of went south. After rebooting the pc overnight, there's a new twist on devtools colors. It depends on HOW the tool(s) are opened.

If I open one tool - like Browser console - using Ctrl+Shft+J (either in Firefox or Tor Browser, aka, TBB), the entire devtool UI is pure black BG & white text. It's never done that before & I don't have white text (color: white) entered in the userChrome code - from cor-el. I'm not using a high visibility theme in Linux or anywhere, AFAIK. I've never seen this black / white behavior until added cor-el's devtools code to userChrome & cold booted. Same black / white if open "Web console" using Ctrl+Shft+K. Web Console also shows all other devtools (e.g., Inspector, Debugger, etc.) as in Browser Toolbox. Not blaming - just giving info.

Maybe the devtools is defaulting to black & white (IF... tools are opened using specific way / shortcut) because it doesn't like the userChrome code? However, if open Browser Toolbox w/ Ctrl+Shft+Alt+I - OR use the menu, THEN it uses the default dark-theme coloring in all panes, all tools - as before attempting to modify devtools dark theme. Browser Toolbox shows ALL SAME tools as Web Console.

OK, little help? Good news: got the background = black - under certain conditions; removed color: properties. I put this code in empty userChrome.css - by itself - no @namespace line.

@-moz-document url-prefix(chrome://devtools/content/) {
body * , .CodeMirror-line *, #output-container {
  font-size: 12px !important; 
  font-weight: bold !important; 
  background-color: black !important;
   }
.devtools-tab *,.splitview-nav > li *{
  font-size:12px !important;
  background-color: black !important;
 }
.devtools-tab.selected *{
  font-weight:bold !important; 
  background-color: black !important}
.tab-panel-box .inspector-tabpanel {
  font-size:12px !important; 
  font-weight:bold !important}
.splitview-nav > li.splitview-active *{
  font-weight:bold !important} 
}

Bad News: starting Browser Toolbox - either thru menu or Ctrl+Shft+Alt+i, it doesn't apply the userChrome code. It still uses the standard devtools dark theme.

If I start Web Console Ctrl+Shft+K, then it uses the userChrome edits, and all the other devtools are in the toolbar. BUT... using Ctrl+Shft+K, where the UI is modified, it's unable (anymore) to inspect any Fx toolbars, tabs, Nav bars, etc., even though the Inspect tool is there (it will inspect chrome pages).

And when devtools are opened (by Ctrl+Shft+K) and a tab is reloaded or new site loaded, devtools closes instantly. I assume there's a bug or need a cold boot.

So I improved devtools UI in some instances, but introduced a couple of unacceptable problems. Any ideas how to find what's causing the new problems?

Hello joebt,

I've asked somebody to take a look at your thread .....

The Browser Console and the other developer tools (Web Console and Inspector; i.e. chrome://devtools/content/) are different components. The Browser Toolbox uses its own profile (chrome_debugger_profile) and is accessed via a remote connection and won't respond to any code in userChrome.css You would probably have to create a chrome folder and userChrome.css file in this chrome_debugger_profile folder to make this work for the toolbox.

You can use the toolbox to check CSS code for the regular developer tools.

Thanks cor-el. Hmmm. Bear w/ me, cause I suspect others may want info on this. For the devtools OTHER than starting Browser Toolbox, just making fonts bold & slightly larger, making backgrounds BLACK in Web Console / Style Editor, etc.,, makes a big difference in readability. So thanks for that.

Correct me if wrong. The only tool (in the "devtools" universe) that can inspect browser toolbars ( navbar / toolbars & all buttons, icons on them, etc.) is "Browser Toolbox"? By now there may be 3rd party addons that customize Browser Toolbox's UI - if web extensions are allowed. Stylish can no longer change the browser UI.

You're saying possibly create a (separate) chrome folder & another userChrome.css file to put in the "chrome_debugger_profile", that's a sub-folder of the working Fx profile?

Have you ever tried code like this in a chrome_debugger_profile/chrome/userChrome.css file to alter the Browser Toolbox UI?

"You can use the toolbox to check CSS code for the regular developer tools."

How do you mean, exactly? There are a couple of things I can think of, but not sure of the extent of usefulness or capability.

If anyone looking at this doesn't want all white text (everywhere in devtools), they'll need to remove any properties for "color:white" in userChrome.css code to style devtools, or else all syntax coloring becomes white.

There is a button on the toolbar of the developer toolbox to select frames. This button opens a list with all available windows and that includes to windows from the developer tools. You may have to enable this button via the settings page (F1).

I've create a separate chrome folder in the chrome_debugger_profile folder like I wrote above and code in userChrome.css works as expected.

See also Targeting a document:

• https://developer.mozilla.org/en-US/Tools/Browser_Toolbox