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
