Oh Adobe, you so crazy…

A recent update to Dreamweaver 2017 turned the tag highlighting to a pastel green 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:

Dreamweaver 2017 Stock Text Highlighting

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 ruin some poor Admin’s day, 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.

  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. 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.

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.

22 thoughts on “Fix Dreamweaver 2017 Code Highlighting

  1. 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.

  2. 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;

  3. 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!

    1. I’ve actually been working on my promised follow-up article with full Dreamweaver 2015 style themes now that DW2018 is out.

      However, this is currently stalled. I’m looking for a way to style individual HTML tags in DW18 different colors like DW15 does (yellow input, purple div, teal table tags, etc).

      Keep an eye on this Adobe forum post. https://forums.adobe.com/message/9931046#9931046

      One way or another I’ll have these full light and dark themes out probably by this weekend, but they’ll be a lot closer to what DW15 does if Adobe (or one of their forum users) knows a way to have HTML tags with their own colors.

      Thanks for your interest!

      1. Thanks Leif! Isn’t it astonishing that we spend all this time and effort trying to restore functionality that was available in an older version.

  4. 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!

  5. 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!!

Leave a Reply

Your email address will not be published. Required fields are marked *