Fix Dreamweaver 2017 Code Highlighting

Oh Adobe, you so crazy…

A recent update to Dreamweaver 2017 turned the tag highlighting to a pastel green and later an ugly brown with white text. Not only is this a poor choice as far as accessibility is concerned, but for a manly man like myself this is simply unacceptable. Luckily, Dreamweaver has switched to using Brackets as its text editor. This means we can fix it!

The Problem:

Now, of course, whomever made this decision at Adobe should be taken out back and be tarred and feathered. Not only is this coloring scheme really hard to read, but I simply cannot abide having to code in pastels. Even worse, it removes all the other code coloring when a tag is highlighted, making it difficult to discern where attributes and properties end within the tag you are currently editing.  Have no fear. Before you let your anger at Adobe get the best of you and you sign up to Adobe.com just to spam their forums with vinegar, do what you always do… and fix Adobe’s mistake yourself.

The Solution:

The newest Dreamweaver uses Brackets as its Code View engine. While you may have to use a little elbow grease of your own, Brackets allows you to create custom code coloring schemes using CSS or LESS.

  1. In Dreamweaver, Go to Edit > Preferences > Interface.
  2. Create a new Theme and give it a name.
  3. Edit your new Theme. This tutorial is based on a copy of the “Light” theme.
  4. This will open the “main.less” file. Add the following to the bottom of the file.
/* Custom code colors or overrides should start after this line */
.CodeMirror-matchingtag {
    color: inherit !important;
    background-color: #ebfefd !important;
}
 
.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. 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.

Stay tuned for my next post on this issue, once I figure out how to completely revert the code theme for DW17 back to how it looked (and how my brain is used to) in DW15.

12
Mar
2017

SJ said:

Sweet Jesus, thank you for this. It’s been driving me insane!

Sweet Jesus, thank you for this. It’s been driving me insane!

18
May
2017

Andy said:

Hi Leif – absolute lifesaver, thanks so much for this!

Hi Leif – absolute lifesaver, thanks so much for this!

28
Jul
2017

Michelle said:

Good gawd – I am so glad I found this. Thanks!

Good gawd – I am so glad I found this. Thanks!

02
Aug
2017

Christoph Ramseier said:

Thank you SO MUCH for this!!!

Thank you SO MUCH for this!!!

03
Aug
2017

KS said:

THANK YOU! I was going crazy with this highlighting

THANK YOU! I was going crazy with this highlighting

08
Aug
2017

Me said:

THANK YOU!!!!!!!!!!!!!!!!!

THANK YOU!!!!!!!!!!!!!!!!!

14
Aug
2017

Elise said:

Eagerly awaiting your next post on this subject. Meantime, I’m downgrading.

Eagerly awaiting your next post on this subject. Meantime, I’m downgrading.

16
Aug
2017

Bert Heije said:

THANK YOU! I was going crazy with this highlighting

THANK YOU! I was going crazy with this highlighting

03
Sep
2017

tedra ortega said:

i am so glad you posted this… it was driving me batty!!!! I don’t know who comes up with these ideas but they apparently don’t code much.

i am so glad you posted this… it was driving me batty!!!! I don’t know who comes up with these ideas but they apparently don’t code much.

18
Sep
2017

LEONARD J CARTER said:

It’s not working for me. Did I miss a step, or does Adobe hate me enough to somehow override the customization?

It’s not working for me. Did I miss a step, or does Adobe hate me enough to somehow override the customization?

20
Sep
2017

LEONARD J CARTER said:

Disregard my last post – I updated Dreamweaver and applied the code… and it WORKS! May heaven rain down upon you free donuts and coffee for all eternity.

Disregard my last post – I updated Dreamweaver and applied the code… and it WORKS! May heaven rain down upon you free donuts and coffee for all eternity.

20
Sep
2017

Tim said:

You are my hero! This highlight has been giving me nightmares for far too long. The world is a better place, thanks to you.

You are my hero! This highlight has been giving me nightmares for far too long. The world is a better place, thanks to you.

05
Oct
2017

Kyle said:

Thanks!

Thanks!

09
Oct
2017

JenM said:

Blood pressure returning to normal…thank you.

Blood pressure returning to normal…thank you.

10
Oct
2017

Don said:

Thank you for this. Upgraded to DW CC from DW CS3 to better fit with an upgrade to Windows 10. It’s been a tough conversion. Other than fixing the highlighting, I note that the code cursor is too small for these 66-year-young eyes. I was able to add the following to the end of Leif’s change, changing the cursor from 1px to 3px.

.CodeMirror-cursor {
border-left: 3px solid #575757 !important;
}

Thank you for this. Upgraded to DW CC from DW CS3 to better fit with an upgrade to Windows 10. It’s been a tough conversion. Other than fixing the highlighting, I note that the code cursor is too small for these 66-year-young eyes. I was able to add the following to the end of Leif’s change, changing the cursor from 1px to 3px.

.CodeMirror-cursor {
border-left: 3px solid #575757 !important;
}

27
Oct
2017

Leo said:

thanks for sharing it!

i wonder if you could advise what to do for the dark theme? i don’t have deep knowledge of Brackets. i tried to substitute the color values in your code with the one from dark scheme – but it didn’t lead to the desired effect.

any hep will be appreciated!

thanks for sharing it!

i wonder if you could advise what to do for the dark theme? i don’t have deep knowledge of Brackets. i tried to substitute the color values in your code with the one from dark scheme – but it didn’t lead to the desired effect.

any hep will be appreciated!

29
Oct
2017

Bob Jones said:

Eureka! This is the best Christmas present ever. I swear I was about to punch a hole through my touch pad. Thanks so much for this fix.

Eureka! This is the best Christmas present ever. I swear I was about to punch a hole through my touch pad. Thanks so much for this fix.

25
Dec
2017

Duane Charles said:

Good Lord. I thought I was the only one seeing the madness in this. Have been trying to cope with it for a couple of weeks, but couldn’t take it anymore. Thank you for the fix. I was about to take it out on my laptop!

Good Lord. I thought I was the only one seeing the madness in this. Have been trying to cope with it for a couple of weeks, but couldn’t take it anymore. Thank you for the fix. I was about to take it out on my laptop!

27
Dec
2017

cknyght said:

Thank you very much! That was making me crazy! Suck it Adobe!

Thank you very much! That was making me crazy! Suck it Adobe!

26
Jan
2018

Frustrated Person said:

Please dont give up, on the adobe forum it might be possible? i finally upgraded from 2015.5 and i can’t believe i already wasted like many hours trying to get the old dark DW color schema. who approved this? what tester would have suggestion this is okay? this is exactly why i always put off updating!!

Please dont give up, on the adobe forum it might be possible? i finally upgraded from 2015.5 and i can’t believe i already wasted like many hours trying to get the old dark DW color schema. who approved this? what tester would have suggestion this is okay? this is exactly why i always put off updating!!

30
Jan
2018

Tom Muck said:

Thank you so much, this worked! I haven’t used DW in a few years and coming back to it I found this horrible “feature”.

Thank you so much, this worked! I haven’t used DW in a few years and coming back to it I found this horrible “feature”.

13
Mar
2018

Leave a Reply

Your email address will not be published.
*