Improving PHP code coloring in Dreamweaver CC

When Adobe updated Dreamweaver CC from 2015 to 2017 they completely rewrote the code coloring engine, bringing it into alignment with Brackets. This had the unfortunate side effect of obliterating all the previously available themes and granular color editing that had been available. Worst of all, the default Light and Dark themes have PHP code coloring that’s indistinguishable from regular text.

They have since released an update that allows the creation of user-editable .less files for custom code coloring. Adobe’s help documentation goes through the process for customizing the code, but it lacks the user-friendliness of the old interface. The steps below outline how to bring back the 2015 themes for Dreamweaver CC 2017, 2018, or 2019.

Before the update, I was a fan of the RecogNeyes theme:

If you look in the Configuration > Themes folder in Dreamweaver CC, you’ll see all the old themes are still there, they just aren’t doing anything anymore.

I attempted to manually recreate this theme pulling color values from RecognEyes.xml into a new custom main.less file. Though, after using the new Dark theme for so long, it seems too desaturated with the new dark UI.

Which has lead me to tweak it to this:

If you’re interested, you can go to Dreamweaver > Preferences, choose “Interface” and click the + to create a new custom theme based on Dark. Click the Pencil icon to edit the theme and paste this at the bottom of the file.

/* RecogNeyes Saturated */
@background: #182225;

/* Color Theme Selectors & Color Values */

.cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #DC78DC;}
.cm-number, .cm-attribute, .cm-plus, .cm-qualifier {color: #fd9794;}

/* PHP Specific Code Colouring */
.PHP {
  .cm-meta { color: #79ABFF; font-weight: bold; }
  .cm-keyword { color: #00E000; } 
  .cm-operator { color: #EFC090; } 
  .cm-variable { color: #FF8080; }
  .cm-variable-2 { color: #2696b2; }
}

Save the file and you’re done! Updated PHP code coloring that’s slightly more WordPress friendly. You may need to go back into preferences to select the theme you created and click “Apply.”

3 Comments

Leave a Comment

  1. ProEnd says:

    What font is it in the last picture?

  2. Fid says:

    Thank you for this!!!

Leave a Comment