This is nearly finished! 

In particular, remove Adobe's tables in the lower half and replace them with a link (which is somewhere below) to the Adobe site information about this instead.

How to specify custom code colors in Dreamweaver

Adobe's Web Page about this – I recommend you read it. But also read my notes below first which may be easier to understand.

  1. Preferences > Category: Interface > Code Theme...
  2. Then determine which Code Theme to use as the basis for your new code colors
  3. Click the ( + ) plus sign under the list of Code Themes
  4. Select from the menu the Code Theme you want to use as the basis of your new code colors.
  5. Name it - preferably using a derivative of the original name such as "Classic - rev01".
  6. Then select the theme you just created in the list.
    1. It may not be there yet. I had to open a new file in Dw before the new theme name would appear in the list.
  7. Click the pencil icon.

  8. This will open the file main.less in Dreamweaver for you to edit.
    • FYI: Note that this file is located on a Mac in the following location:
      1. Users >
      2. the username >
      3. Library >
      4. Application support >
      5. Adobe >
      6. Dreamweaver CC 2018 (will change with subsequent versions) >
      7. en_US  >
      8. Configuration >
      9. Brackets >
        • Brackets is an open source, free code editor that is published by Adobe.
        • This location suggests that the code colors used by Brackets could be changed to the colors specified in the main.less file (below) but this does not seem to be the case.
      10. extensions >
      11. user >
      12. ...then you will see a folder name that corresponds to the name of your new Color Theme.
      13. Inside of that folder is the main.less file that you will edit.
  9. Add new code at the end of the .less file under this comment:
    /* Custom code colors or overrides should start after this line */
  10. Token Insector
    1. This is the appearance of the Token Inspector
    2. The list of classes are in the right column.
    3. When you click on an element, or part of one, the class that is affecting the color of that data type will be highlighted in the left column.
  11. The colors that the classes affect are shown in this table.

NOTE - In the Token Inspector notes be sure to mention that the file type needs to be appended to any root file name and then click the change mode button to set it.

Edit from here down then proofread it all...

The following is copied from this Adobe Page in item 10.a - the above link

Code customization examples

Review the following examples to understand how you can customize code colors for different scenarios.

Adjust the color of the highlighting of paired tags

In the main.less file, search for the following code snippet and adjust the color.






.CodeMirror-matchingbracket, .CodeMirror-matchingtag {

   /* Ensure visibility against gray inline editor background */

   background-color: #B53A3A;

   color: #fff!important;


This code snippet is theme dependent. It may not be present in all themes.

Adjust the color of code comments

In the main.less file, search for the following code snippet and adjust the color.


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

Understanding selectors

To change the colors of your code elements, edit the properties of the selectors in the main.less file.

However, before you jump into modifying the selectors in main.less file, it is important to know what the different selectors mean, and the code elements they impact. Review the following table to understand the code elements in HTML, CSS, JavaScript, and PHP files that are impacted by these selectors.
You can also use the Token Inspector to understand the code elements that are impacted by a particular selector.

NOTE by Dan: the list of selectors below is not complete. It does not include the .CodeMirror selectors shown above! There are many other items in the .less file that are not included below.

Here are some of my assumptions:

Don't use this, it's copyrighted! Link to the page instead

in the .less file






Entity names such as  

Color in hexadecimal, RGB, or HSL format, predefined attribute values such as strong, none, auto, inherit, and so on.

true, false, null, undefined, NaN, Infinity

True, False, Null and magic constants such as __LINE__, __DIR__, and so on


Attribute Name

Media types such as all, braille, print, screen, and so on


Tag brackets such as <, >, /> and </


ID selector

Built-in functions such as htmlspecialchars, trim, substr, and so on







"@ rule"

variable, function definition and function parameter

The function name in function definition


Closing tags without a starting tag

Missing a quotation for a attribute value

Error because of missing  { or } brackets or missing quotes for a property value or unrecognized property


Color names, !important, keywords in @media like and, only, and so on.

Control structure keywords (if, else, …), in, of, from, default, public, private, and so on

Keywords like function, if, else, new, echo, isset, and so on


<!DOCTYPE> Declaration

Browser specific prefixes such as -webkit-, -o-, and so on

Ellipsis in spread syntax. Example: myFunction(...iterableObj);

<!DOCTYPE> Decleration and PHP start and end tags: <?php, ?>


Any number with or without a unit

Any number like 12, 2.1, 123e-5, 0x11, 0b11, 0o11, and so on

Any number like 12, 2.1, 0x11, 0b11, 0123, 5.0E+19, and so on.


Operators: +, -, *, +=, !==, &&, >>>, and so on

Operators like ===, &&, !, =>, +, -, and so on


Property name

Object property or method


Class selector


attribute value

Regular string, like one passed to a url() call, font name within quotes, and so on.

Literal string

Literal string


Non standard properties like scrollbar-arrow-color, scrollbar-base-color, and so on.

Regular expressions


Tag name

Tag selector


Font names without quotes

Global variables/functions, class references

User defined function names, interface/class references, class properties, casts,


Custom properties such as main-bg-color

Scoped variables/functions references

User defined and predefined variables, parameters or attributes


Pseudo-classes such as :hover, and :focus, and pseudo-elements such as ::first-letter, ::selection, and so on

The following table indicates the Dreamweaver templates and libraries
that are affected by the selectors in the main.less file.


Templates (DWT)

Library (LBI)


Template comments


Attribute values in template comments


InstanceParam comment and attribute


InstanceParam attribute values


Inserted Libraries in a document. Example: .cm-libraryItem { color: #3A3A3A; background-color: #A4A4A4; }

The following table indicates the selectors to be used when customizing code colors
for scenarios where multiple languages exist in a single file.


Code file type




CSS, Less