Skip to main content
Nancy OShea
Community Expert
Community Expert
Jan 20, 2017 11:46 PM UTC
Question

Solution: White on Mint Green Code Color.

This question gets asked a lot lately so I thought I would put together a solution for anyone who is interested.  Incidentally, it works the same for light or dark based code color themes.

Go to Edit > Preferences > Interface

Create a new theme.  See screenshot below.

Name your new Theme.

Edit your new Theme.

At the bottom of your main.LESS file, add the following.

/* Custom code colors or overrides should start after this line */

.CodeMirror-matchingtag {

    color: white !important;

    background-color: navy !important;

}

Adjust color values to suit.

Save main.LESS file.

Close main.LESS file.

Go back to Preferences and Apply your newly created code Theme.

This topic is closed to new replies. Start a new post to keep the conversation going.

15 replies

Participant
Feb 25, 2019 8:48 PM UTC

Thank you! I followed your easy instructions and got rid of that horrid orange highlighting. Yay!

Translate
stanl48910434
Participant
Nov 1, 2018 6:06 PM UTC

Thanks for that. It was driving me crazy. Couldn't read any text in a selected tag in the Dark theme.

Only problem is that when I created a new theme, nothing happened. I tried it a few times, nothing.

So, having learnt all my computer skills from The IT Crowd, I applied the universal, "Have you tried turning it off, then turn it on again".

That worked. New themes appeared. All good.

Adobe: why you do this?

Translate
Ussnorway7605025
Legend
Jun 18, 2018 3:24 AM UTC

thanks Nancy... I like this set of colours much better

Translate
mbk28
Known Participant
Apr 23, 2018 4:57 PM UTC

that's don't work on Mac.

Translate
Nancy OShea
Community Expert
Community Expert
Apr 23, 2018 5:45 PM UTC

Which version of DW and OS do you have?

Editing LESS files is no different than editing any other text file.  When done, save your LESS file and close it.  Then Apply your theme in Preferences.

Translate
Nancy O'Shea— Product User & Community Expert
TheSide
Participant
Jan 27, 2018 7:00 PM UTC

You genius.

Thank you SOOOO MUCH.

What is wrong with adobe ? Did they not think that this mint green highlighting was ridiculous? was it a joke?

I have spent a LONG time looking for a solution that worked without having to interfere with too many files for fear of causing myself more trouble.

Thank you VERY MUCH.

I hope Adobe people read this. Stop doing stupid things with software that previously worked very well. I was very close to giving up with Adobe products as there are similar nuisance "improvements" that they have added to Illustrator and Photoshop.

My sanity should return soon!

Translate
Participant
Feb 25, 2017 3:36 PM UTC

Hi Nancy,

I like this approach; could you please tell me how I can force the tag to remain at its original state when I click on it for editing?

Just leave it as it is for editing would be nice so I can simply make my change and move on to the next edit.

Thanks!

Translate
OhAdobeYouSoCrazy
Inspiring
Mar 3, 2017 4:15 PM UTC

Hi Web_Zest,

I ran into this problem after my recent update and was completely unwilling to accept that I had to edit in Pastel Green with white text. Of course, I've been writing CSS for about 20 years and have long been used to tweaking Dreamweaver in some way to provide functionality that Adobe themselves are very often circumspect to add themselves.

So, without further ado here is a fix that will add a very light blue background AND retain the normal color of text. Note: I have only tested this with HTML files. CSS, PHP, JS files may need their own fixes. I will try to update this post with those fixes if this ends up being the case. This is based on a copy of the light theme, but a similar hack could be used for a copy of the black theme as well. Use the custom code theme technique from above, but add this to the bottom of the main.less file and save.

/* Custom code colors or overrides should start after this line */

.CodeMirror-matchingtag {

    color: inherit !important; /* Don't know if this is necessary, but whatevs */

    background-color: #ebfefd !important; /* Set your BG color here same as the above post */

}

.CodeMirror-focused .cm-atom, .CodeMirror-focused .cm-string, .CodeMirror-focused .cm-string-2, .CodeMirror-focused .cm-hr {color: #1c1ca8 !important;}

.CodeMirror-focused .cm-number, .CodeMirror-focused .cm-attribute, .CodeMirror-focused .cm-plus, .CodeMirror-focused .cm-qualifier {color: #b16423 !important;}

.CodeMirror-focused .cm-def, .CodeMirror-focused .cm-property {color: #0b8dc6 !important;}

.CodeMirror-focused .cm-variable, .CodeMirror-focused .cm-variable-2, .CodeMirror-focused .cm-variable-3, .CodeMirror-focused .cm-operator, .CodeMirror-focused .cm-meta, .CodeMirror-focused .cm-bracket {color: @foreground;}

.CodeMirror-focused .cm-comment {color: #8C8C8C !important; font-style: italic; }

.CodeMirror-focused .cm-error, .CodeMirror-focused .cm-minus {color: #7b6546 !important;}

.CodeMirror-focused .cm-header {color: #87908e !important;}

.CodeMirror-focused .cm-link {color: #1fc6d4 !important; text-decoration: none;}

.CodeMirror-focused .cm-rangeinfo {color: #2c9abc !important;}

.CodeMirror-focused .cm-keyword, .CodeMirror-focused .cm-builtin, .CodeMirror-focused .cm-tag, .CodeMirror-focused .cm-quote {color: #8b1a83 !important;}

The basic idea here is to copy all the HTML tag CSS definitions and then override them by providing a CSS selector with a higher specificity than whatever it is that Adobe does to force all this text to a single color. Which, in my humblest opinion, whomever decided this was a good idea should be fired, tarred and feathered, in addition to having their mother called to be informed of what a total failure they have become.

HOW TO CUTSOMIZE YOURSELF:

Here is the code block I copied which defines the general code styles:

.cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #1c1ca8;}

.cm-number, .cm-attribute, .cm-plus, .cm-qualifier {color: #b16423;}

.cm-def, .cm-property {color: #0b8dc6;}

.cm-variable, .cm-variable-2, .cm-variable-3, .cm-operator, .cm-meta, .cm-bracket {color: @foreground;}

.cm-comment {color: #8C8C8C; font-style: italic; }

.cm-error, .cm-minus {color: #7b6546;}

.cm-header {color: #87908e;}

.cm-link {color: #1fc6d4; text-decoration: none;}

.cm-rangeinfo {color: #2c9abc;}

.cm-keyword, .cm-builtin, .cm-tag, .cm-quote {color: #8b1a83;}

Note I prepended each CSS definition with .CodeMirror-focused and also added the !important to each definition. In this way one could do pretty much anything they wanted with the highlighted code. Either keeping the original code coloring, or creating their own custom highlight color scheme. For me, just returning the functionality back to "sane" was fine.

Have a good day all!

OhAdobeYouSoCrazy

Translate
Jon Fritz
Community Expert
Community Expert
Mar 3, 2017 4:44 PM UTC

EXCELLENT WORK!!!


Now to peel it apart and modify my dark theme.

Translate
pliles
Inspiring
Jan 24, 2017 3:23 PM UTC

Thank you Nancy...  It worked very well and I can now see the highlights!   You have probably reduced the wrinkles around my eyes by 50%!

Really appreciate you assistance. 

I am sorry I created a "hornets nest"  :-)

Translate
Nancy OShea
Community Expert
Community Expert
Jan 24, 2017 6:25 PM UTC

Glad it worked for you .

If you're referring to the subsequent discussion in your other thread (now locked), you didn't create a hornet's nest.  Some people have nothing better to do than complain for the sake of complaining.

Nancy

Translate
Nancy O'Shea— Product User & Community Expert