Hiển thị các câu hỏi được đánh dấu: Xem tất cả các câu hỏi
  • Đã giải quyết

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 sta… (xem thêm)

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.

Asked by Joebt 3 tháng trước

Answered by Joebt 3 tháng trước

  • Đã giải quyết

Developer Tools-Style Editor_change selected code text color

This is about Style Editor, which uses different code for styling. The colors used in browser toolbox (Ctrl + Shft + Alt + I) *Style Editor* uses Code Mirror selectors. … (xem thêm)

This is about Style Editor, which uses different code for styling. The colors used in browser toolbox (Ctrl + Shft + Alt + I) *Style Editor* uses Code Mirror selectors. Due to less than perfect sight & the poor visibility / contrast colors of found search terms & several other things in Style Editor, I needed to change things.

I didn't have too much problem finding most of CM's CSS selectors for what I needed. In all the CSS files associated with code mirror in the dark theme, I haven't found how to change the foreground (text) color when selecting lines or sections of code.

In Linux, Style Editor's default selected background is almost the same as the body BG color (looking at the hex colors used, and just visually. This from codemirror.css in omni.ja, changes selected, unfocused background: .CodeMirror-selected {

 background: #D4E7F9 !important;

This changes the selected, focused BG color: .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {

  background-color: #E9ECD8 !important; }

But I've found nothing for foreground "color," to make the selected text legible through the light selected BG color I chose. Just adding "color: #0000FF !important;" - under the background property doesn't work (like many CSS styled UIs - especially text editors).

Is it possible that Code Mirror doesn't have a way to change the text color on selected areas? Most text editors I've tested usually have preference menu settings for things like selected - foreground & BG color. Or they have themes that add extra UI styling ability. The themes on code mirror's site don't seem to use selected foreground color (or just "color"). Maybe it doesn't understand that concept.

If the highlight BG color chosen for CM is fairly light with some transparency, you can read some darker syntax colors, but not all.

Using another text editor with better search, I looked & searched all files I could find that control some of Style Editor's / code mirror's colors.

The only thing I found where I could change selected text color was one rule for searching in Style Editor. It's in codemirror.css ... and it doesn't work that consistently for visibility. /chrome/devtools/content/shared/sourceeditor/codemirror/lib/codemirror.css

The default colors (someone) used for search term matches have little contrast.

LINE 330: .cm-searching {

 background-color: rgba(255, 255, 170, 0.6) !important; /* The 1st BG value listed is for focused search result highlight.*/
 color: #0808E5 !important;
 background-color: rgba(2226, 253, 251, .6) !important; }

NOTE: I added the color property in ".cm-searching" - and it worked. Same trick doesn't work for any selection rules I tried. Codemirror's online manual is fairly spartan https://codemirror.net/doc/manual.html#styling

Asked by Joebt 4 tháng trước

Answered by Joebt 4 tháng trước