• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
2

Solution: White on Mint Green Code Color.

Community Expert ,
Jan 20, 2017 Jan 20, 2017

Copy link to clipboard

Copied

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.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Views

6.8K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 24, 2017 Jan 24, 2017

Copy link to clipboard

Copied

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"  🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 24, 2017 Jan 24, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 25, 2017 Feb 25, 2017

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 03, 2017 Mar 03, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 03, 2017 Mar 03, 2017

Copy link to clipboard

Copied

EXCELLENT WORK!!!


Now to peel it apart and modify my dark theme.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 20, 2017 Sep 20, 2017

Copy link to clipboard

Copied

OhAdobeYouSoCrazy You, sir, are a golden god. You've made this unbearable excuse for a product usable.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 17, 2018 Jun 17, 2018

Copy link to clipboard

Copied

At last a healthy mind in this Adobe madness, thanks for the tip ;-)))

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 10, 2020 Mar 10, 2020

Copy link to clipboard

Copied

This fixed my Dreamweaver code highlighting mess. Thank you, OhAdobeYouSoCrazy!

 

NOTE TO ADOBE: Your Dreamweaver code highlighting was a disaster; easily the worst I've ever seen and completely nonsensical. I simply cannot believe that you did an real world testing with independent developers.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 08, 2021 Mar 08, 2021

Copy link to clipboard

Copied

LATEST

Thank You a lot. It really helped me. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 27, 2018 Jan 27, 2018

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 23, 2018 Apr 23, 2018

Copy link to clipboard

Copied

that's don't work on Mac.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 23, 2018 Apr 23, 2018

Copy link to clipboard

Copied

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.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 17, 2018 Jun 17, 2018

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 01, 2018 Nov 01, 2018

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 25, 2019 Feb 25, 2019

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines