Solved in Fx 74_Linux. Install a theme from codemirror.net (or other method) in developer tools
Codemirror.net has lots of themes besides the dark theme in current dev tools (now Fx 74). The "instructions" how to add / use one :D are more towards if CM is a free standing editor, rather than if codemirror is embedded in a browser.
"Up to a certain extent, CodeMirror's look can be changed by modifying style sheet files. The style sheets supplied by modes simply provide the colors for that mode, and can be adapted in a very *straightforward* way. Well....
"To style the editor itself, it is possible to ALTER or override the styles defined in codemirror.css."
Continuing: "The easiest way to use CodeMirror is to simply load the script and style sheet found under lib/ in the distribution, plus a mode script from one of the mode/ directories. For example:
<script src="lib/codemirror.js"></script> <link rel="stylesheet" href="lib/codemirror.css"> <script src="mode/javascript/javascript.js"></script>"
The only problem is, I can't find a detailed enough example (only ones like the college engineering professors worked, leaving out several key steps).
There weren't many posts in their community about how to make it use another theme than the Default, that's inside of codemirror.css in omni.ja. A guy answering a question about this referenced the theme demo page, showing different themes on code. Said maybe you can read the source files for the demo page. I read it, but I'm not sure it's applicable when embedded in Fx.
I've searched a lot how to do it & there's not much info. Honestly, unless someone advanced enough to look at their instructions could simplify it, it's possible the fastest way is change the default theme colors in codemirror.css, then repack omni.ja. Codemirror mentions that method, but again, I think they're talking if it's freestanding or backend for some text editor, not embedded in a browser.
I'm not sure userChrome will work because it's not really part of Fx. At least I couldn't get it to work, putting the theme code in userChrome (either the normal or /chrome_debugger_profile/chrome). Though some people change some things in devtools using userChrome.css. It breaks when Mozilla changes anything.
The very few things I had tweaked in CM / dev tools UI, stopped working in Fx 74. Nothing I could do - a new profile, new userChrome file, copying a few rules - ever made it work in Fx 74. Most of what I found was people having a hard time changing devtools UI (in Fx or Chrome) w/ any consistency.
Modifié le par JoeB
Solution choisie
As question title now shows, seems "we" found the method to change colors in Fx 74 dev tools. Imagine my surprise this morning, when obvious color changes were in -only- Browser Toolbox. I made one final change in userContent.css last night but didn't test results. The little, hairy female I'm sleeping with (4 legged) was exhausted from watching me type & ready for bed.
I'll have to share credit with cor-el for one suggestion for the right syntax to use in userContent.css, i.e., use at the 1st of userContent.css: *|*:root.theme-dark {
It works for me in Fx 74 (Linux), using custom selectors for developer tools colors, like --theme-body-background: black !important; (in userContent.css, use !important; to override Fx defined values.
Also to jscher2000 for ideas that weren't the solution (this time), but lead me to read up & eliminated some formerly valid methods, narrowing the remaining possibilities.
Bulk of selector names & default colors for syntax coloring in dev tools seem to be in variables.css, using the form for selectors - above .
Copying most syntax, background, text coloring statements out of variables.css to userContent.css would cover a good deal of dev tools' visually important elements. To view any of the files mentioned, in dev tools Inspector, in the middle Rules pane, right click the file name (e.g., variables.css) then "copy location." Paste it in Firefox's URL bar & enter. You don't have to unzip / extract omni.ja file to see the relevant files.
Some other elements colors are set in common.css, e.g.,
--tab-line-selected-color: var(--blue-50); /* top border color of selected dev tools tab. */
--toggle-thumb-color: white;
A few others are in mozilla.css, dark-theme.css / light-theme.css, rules.css & more files. It becomes a mess. I can barely read the Rules Pane default , brown pseudo txt color against almost black background. Mozilla devs must like it.
To view dev tools default colors for selector names for SPECIFIC elements, open browser toolbox or web console (with a web page opened). In browser toolbox - Inspector tool, click the button to the left, showing "select an element from the page." In the open web console (start with Inspector tool), use Browser Toolbox's Inspector (mouse / cursor) to find various elements' selector names or default colors in the web console.
Selectors found by inspecting the web console UI can be used to theme BOTH the browser toolbox & web console.
- The userContent.css file placed in the firefox profile in /chrome/userContent.css, affects the web console's elements.
- The userContent.css placed in firefox profile in /chrome_debugger_profile/chrome/userContent.css affects Browser Toolbox's elements.
The default colors in browser toolbox & web console are generally the same, but can be colored differently. The actual colors for values shown like "var(--blue-50)" - are defined in variables.css
I've not found if any "Default Theme" values in codemirror.css. are used in dev tools, or mostly overridden by other files.
Lire cette réponse dans son contexte 👍 0Toutes les réponses (14)
In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.
- toolkit.legacyUserProfileCustomizations.stylesheets = true
See:
Note that you need to add the !important flag to all the rules to be able to override an existing rule. Best is to use an @import url(file.css); in userContent.css to import your modified CodeMirror CSS file.
See also:
Modifié le par cor-el
(Never mind)
Can you give an example of a page with CodeMirror embedded that you want to re-theme?
Modifié le par jscher2000 - Support Volunteer
Note that the code for the devtools needs to be in userContent.css.
You can use a @-moz-document block like this:
@-moz-document
url-prefix(chrome://devtools/content/) {
/* place your code here */ }
Note that code for the Browser Toolbox needs to be in the chrome folder in the chrome_debugger_profile folder.
Test code for userContent.css :
@-moz-document
url-prefix(chrome://devtools/content/) {
body,
.CodeMirror-line,
#output-container,
.devtools-tab {font-size:14px !important; font-weight:bold}
.toolbox-tabs
.devtools-tab-label {font-size:14px !important;}
}
"Note that the code for the devtools needs to be in userContent.css." Since when? Which "devtools" do you mean ( code in userContent.css)? Did that change recently?
Up through Fx 73, to style (a few things) in Web Console (Ctrl Shft K), I had web console + Fx UI code in ~./chrome/userChrome.css. I had styles for Fx UI in another file (my_userChrome) that was @imported into userChrome. The web console styling worked (in /chrome/userChrome.css) until Fx 74. This is the 1st I've ever seen that CSS code for any dev tools should go in userContent.
That may be true for certain parts of dev tools, or it changed, but there's no denying the (quite different) colors from hongkiat's devtools styling sample worked when put in userChrome.css. I figured the web console styling stopped working because of changes in Fx 74 (it's happened). But it may have been a case of "invisible" bad data in about:config / prefs.js.
I had to BU prefs.js, & let it create a new one before anything from userChrome showed up in rules view. But not all the colors are being applied. That's not surprising. Colors for web console / browser toolbox come from 4 - 5 files, at least. It's "convoluted."
The pref you mentioned, "toolkit.legacy..." has been = True since v69, or else no userChrome would've worked. Good to check. I think there's another pref needs to be true (if select dark theme in dev tools settings) - "browser.in-content.dark-mode." True is default for that in my build.
On https://www.hongkiat.com/blog/personalize-firefox-dev-tools-theme/ Per his instructions, I copied dev tools dark theme sample code (aka, web console Ctrl Shft I) into /chrome/userChrome.css - that already had a few things in it. As opposed to the Browser Toolbox, that allows examining chrome pages & "normal stuff."
Hongkiat's code below worked in userChrome (as he mentions to put it) for Inspector & Style Editor (maybe debugger) in web console, UNTIL the Fx 74 update.
:root.theme-dark {
--theme-body-background: #050607 !important;
--theme-sidebar-background: #101416 !important;
--theme-tab-toolbar-background: #161A1E !important;
--theme-toolbar-background: #282E35 !important;
--theme-selection-background: #478DAD !important;
--theme-body-color: #D6D6D6 !important;
--theme-body-color-alt: #D6D6D6 !important;
--theme-content-color1: #D6D6D6 !important;
--theme-content-color2: #D6D6D6 !important;
--theme-content-color3: #D6D6D6 !important;
--theme-highlight-green: #8BF9A6 !important;
--theme-highlight-blue: #00F9FF !important;
--theme-highlight-bluegrey: white !important;
--theme-highlight-lightorange: #FF5A2C !important;
--theme-highlight-orange: yellow !important;
--theme-highlight-red: #FF1247 !important;
--theme-highlight-pink: #F02898 !important;
}
I'm not sure if @importing into userChrome.css, a color-modified codemirror.css will work for dev tools. Maybe. It'll be easy enough to try. I'll let you know.
Modifié le par cor-el
In Firefox 74, if I use the Browser Toolbox to inspect the Page Inspector, it appears that the HTML tree is in a frame starting with this document (paste URL to the address bar to view):
chrome://devtools/content/inspector/markup/markup.xhtml
To target that with the Honkiat rules in userContent.css:
@-moz-document url(chrome://devtools/content/inspector/markup/markup.xhtml){
:root.theme-dark {
--theme-body-background: #050607 !important;
--theme-sidebar-background: #101416 !important;
--theme-tab-toolbar-background: #161A1E !important;
--theme-toolbar-background: #282E35 !important;
--theme-selection-background: #478DAD !important;
--theme-body-color: #D6D6D6 !important;
--theme-body-color-alt: #D6D6D6 !important;
--theme-content-color1: #D6D6D6 !important;
--theme-content-color2: #D6D6D6 !important;
--theme-content-color3: #D6D6D6 !important;
--theme-highlight-green: #8BF9A6 !important;
--theme-highlight-blue: #00F9FF !important;
--theme-highlight-bluegrey: white !important;
--theme-highlight-lightorange: #FF5A2C !important;
--theme-highlight-orange: yellow !important;
--theme-highlight-red: #FF1247 !important;
--theme-highlight-pink: #F02898 !important;
}
}
It changes, as shown in the attached, but I don't know whether that matches the hex colors.
You may have to specify all namespaces: *|*:root .theme-dark { }
Modifié le par cor-el
"LILLB. SO MR PIGS! (I'll explain later)
@cor-el, So where'd you find that what once went in userChrome.css (& worked) to change at least Inspector & Style Editor, then stopped in Fx 74? I didn't see that mentioned in 100 articles. Three (40 hr) weeks down the drain. All for some @!%&!! pretty colors. "Ooo - look at the preeety colors, Percival."
@jscher2000 - "In Firefox 74, if I use the Browser Toolbox to inspect the Page Inspector, it appears that the HTML tree is in a frame starting with this document." When I paste the markup document location, I get a solid black page (in Fx 74.0.1 Linux).
I see the markup.xhtml document in the list when click the icon in browser toolbox, "select an iframe as currently targeted document." But I couldn't figure out how / what to click in the web console (using browser toolbox's Inspector), that revealed that document was the one to use as the @-moz-document. There are several instances of the "chrome://devtools/content/inspector..." in the "pick an iframe" list.
Can you explain - somewhat (or a link) what / how you "inspected" in the web console inspector pane, or... to see which was the correct document?
Using the @-moz-document url(chrome://devtools/content/inspector/markup/markup.xhtml) in userContent.css changes the Inspector pane (go figure) - maybe Style Editor - have to re-check. But no effect on other (often used) tools.
I assume we'll have to find the other correct documents for EACH desired tool & put them at the beginning of userContent.css? I'm anxious to find out how to do it.
Something odd - on the 1st selector, when I enter: @-moz-document url(chrome://devtools/content/inspector/markup/markup.xhtml){
:root.theme-dark {
--theme-body-background: #050607 !important;
--theme-sidebar-background: #181d20 !important;
the bolded part isn't activated. They're all solid green But all selectors & colors after it are OK.
- root.theme-dark{
--theme-body-background: #050607
The colon : in front of 'root' is OK (gold). It could be a bad selector name, but I see it used elsewhere & looks OK. I see what cause it - the @-moz-document line causes the :root.theme-dark & the 1st selector to not be active. The same selector is used in variables.css (1st line) after> :root.theme-dark { but variables.css doesn't have @-moz-document as the 1st line. When I comment it out that in userContent file, the :root.theme-dark & the 1st selector turn normal color (active). But why only the 1st selector out of 15? All spacing & punctuation is the same.
I changed some of the colors from the Hongkiat article was from Apr '16. It looks like most of the colors I changed from Hongkiat's show up in Inspector. Didn't check background color, yet (theme-body-background).
I changed the 1st selector & it's still inactive.
For anyone looking, the variables.css file (in omni.ja) path has changed to: /chrome/devtools/modules/devtools/client/themes/variables.css
Joebt said
Can you explain - somewhat (or a link) what / how you "inspected" in the web console inspector pane, or... to see which was the correct document?
In the page, I opened the Page Inspector.
In the Browser Toolbox (MDN), Inspector tool, I turned on "Click to select" and then clicked the body tag in the Page Inspector. Working upwards from there, I found the iframe src, and eventually worked out its full address.
I haven't looked at the other panes since I was trying to replicate the results from the article you mentioned.
Easiest to target all or most devtools page is to use a url-prefix selector like I posted abover.
@-moz-document
url-prefix(chrome://devtools/content/) {
}
cor-el said
Easiest to target all or most devtools page is to use a url-prefix selector like I posted abover.
@-moz-document
url-prefix(chrome://devtools/content/) {
}
I'm not sure the code (syntax style) you showed will work for general syntax coloring, e.g., keywork, tag, color, etc. Even as below, didn't work on 1st attempt. It may be bcs somewhere, the "theme name" is specified, that codemirror.css uses on every line (for "default theme"): .cm-s-default .cm-keyword {color: #708;}.
I could try, but I'm fairly sure it won't just accept entering ".cm-s-default" or ".cm-s-midnight" in a userContent or userChrome file, without editing some? file, with the replacement theme name. There's also 5 - 10 files shown in developer tools, apparently styling some syntax coloring.
Saw a CM forum post - asking how to use the custom themes. Answer (I didn't fully understand) involved editing some JS file & other steps. I recall a brief, non-specific / non-helpful (to me) mention in codemirror.net's user manual / theme section.
If none of this works, I could link that forum post - maybe someone w/ more experience may understand.
The type of selectors in the "default theme" - in codemirror.css, are style:
.cm-s-default .cm-quote {color: #090;}
.cm-negative {color: #d44;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-comment {color: #a50;}
I just picked few examples. Using your style, I don't know how to find all the (correct) selectors for most of the properties, elements included in "default theme" in codemirror.css; or the same style "css themes" on codemirror.net's site, matching the /* DEFAULT THEME */ in codemirror.css.
It may take long time, figuring out (some) selectors (as you showed) that correspond to syntax coloring in the "default theme" inside codemirror.css .
Your code example's also not in the style of: --theme-background: #FF0000 !important;
You need to get acquainted with the Browser Toolbox to see what CSS rules are applied in various cases. You need to append the !important flag to override an existing CSS rule.
- https://dxr.mozilla.org/mozilla-release/source/devtools/client/shared/sourceeditor/codemirror/lib/codemirror.css
- https://dxr.mozilla.org/mozilla-release/source/devtools/client/shared/sourceeditor/codemirror/mozilla.css
- https://dxr.mozilla.org/mozilla-release/source/devtools/client/themes/variables.css
Modifié le par cor-el
Thanks, I really do appreciate people trying to find a solution. I'm tired out & Arthur Ritis is beating up on me pretty good. So don't anyone take anything I say as sounding like not being appreciative of attempted help.
For everyone's FYI (now & later), it appears the @-moz-document CSS at-rule: [@-moz-document url(chrome://devtools/content/inspector/markup/markup.xhtml){ ] was disabled (security) & surely by now, also @-moz-document url-prefix() { - also due to security (article from 2018). See https://www.fxsitecompat.dev/en-CA/docs/2018/moz-document-url-prefix-css-hack-will-no-longer-work/
That may explain in jscher's example & the "@-moz-document
url-prefix" method, the odd 1st selector appearing as inactive - & neither applying most colors.
Honestly, I already knew enough of which CSS rules applied to dev tools to work pretty well. Methods go bye-bye all the time. Nothing I remember in release notes or - AFAIK, in developer tools news.
I haven't confirmed a v74 change or new bug, but stopping working immediately after a clean Fx 74 install & a new, clean profile , plus older methods no longer work - is fair indication something changed.
I appreciate the links. I think I've seen them several times. I'll look again tomorrow. What was in them was mostly what other people wrote in lots of articles. I'm not sure any of them addressed Fx 74.
If Mozilla changed things so dev tools can't be easily "colored" - for now, not much to do. If there's a new trick, it isn't easy to find.
Maybe I'll post a question bug on bugzilla - whether it's a known issue.
I had forgotten that I set both these prefs to true by default via autoconfig.cfg
- user_pref("layout.css.moz-document.content.enabled", true);
- user_pref("layout.css.moz-document.url-prefix-hack.enabled", true);
Solution choisie
As question title now shows, seems "we" found the method to change colors in Fx 74 dev tools. Imagine my surprise this morning, when obvious color changes were in -only- Browser Toolbox. I made one final change in userContent.css last night but didn't test results. The little, hairy female I'm sleeping with (4 legged) was exhausted from watching me type & ready for bed.
I'll have to share credit with cor-el for one suggestion for the right syntax to use in userContent.css, i.e., use at the 1st of userContent.css: *|*:root.theme-dark {
It works for me in Fx 74 (Linux), using custom selectors for developer tools colors, like --theme-body-background: black !important; (in userContent.css, use !important; to override Fx defined values.
Also to jscher2000 for ideas that weren't the solution (this time), but lead me to read up & eliminated some formerly valid methods, narrowing the remaining possibilities.
Bulk of selector names & default colors for syntax coloring in dev tools seem to be in variables.css, using the form for selectors - above .
Copying most syntax, background, text coloring statements out of variables.css to userContent.css would cover a good deal of dev tools' visually important elements. To view any of the files mentioned, in dev tools Inspector, in the middle Rules pane, right click the file name (e.g., variables.css) then "copy location." Paste it in Firefox's URL bar & enter. You don't have to unzip / extract omni.ja file to see the relevant files.
Some other elements colors are set in common.css, e.g.,
--tab-line-selected-color: var(--blue-50); /* top border color of selected dev tools tab. */
--toggle-thumb-color: white;
A few others are in mozilla.css, dark-theme.css / light-theme.css, rules.css & more files. It becomes a mess. I can barely read the Rules Pane default , brown pseudo txt color against almost black background. Mozilla devs must like it.
To view dev tools default colors for selector names for SPECIFIC elements, open browser toolbox or web console (with a web page opened). In browser toolbox - Inspector tool, click the button to the left, showing "select an element from the page." In the open web console (start with Inspector tool), use Browser Toolbox's Inspector (mouse / cursor) to find various elements' selector names or default colors in the web console.
Selectors found by inspecting the web console UI can be used to theme BOTH the browser toolbox & web console.
- The userContent.css file placed in the firefox profile in /chrome/userContent.css, affects the web console's elements.
- The userContent.css placed in firefox profile in /chrome_debugger_profile/chrome/userContent.css affects Browser Toolbox's elements.
The default colors in browser toolbox & web console are generally the same, but can be colored differently. The actual colors for values shown like "var(--blue-50)" - are defined in variables.css
I've not found if any "Default Theme" values in codemirror.css. are used in dev tools, or mostly overridden by other files.