User Guide Cancel

Customize code coloring

  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Learn how you can customize the colors of your code elements (code coloring) such as code comments in Dreamweaver.

In Dreamweaver, you can change your interface color preferences using Edit > Preferences > Interface.

You can choose between four different color themes, and select a light or dark code theme. 

After you set your color and code theme, you can further personalize your code colors in Dreamweaver by editing the selectors in the in-built main.less file.

Set color themes and code themes

You can choose a color theme according to your preferences when you start Dreamweaver. You can also change this preference any time.

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).

  2. Select Interface from the Category list on the left.

  3. Choose a theme from the Color Themes list. 

  4. After setting the interface theme, set the code theme.

    You can choose between a light or dark code theme. You can then save this theme with a new name and customize it further.

    Default code themes
    Default code themes

  5. Click Apply to save the changes.

Customize code themes

After selecting a code theme, customize the code colors by saving the code theme with a new name and editing it.

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).

  2. Select a light or dark code theme, then click the plus icon, and save the theme with a new name.

    Note:

    The default light and dark code themes are not editable, so you have to make changes to a copy of this theme. New themes that you create can be edited always.

    Creating a new theme
    Creating a new theme

  3. Save the default code theme with a new name.

    Creating a code theme based off a default code theme
    Creating a code theme based off a default code theme

  4. Select the newly created code theme, and click the Edit icon.

    The main.less file opens in Dreamweaver, and you can now edit the selectors in the theme to customize your code colors.

    The Code view refreshes with the new colors when you save the main.less file.

Edit selectors in the main.less file

Before you jump into editing the selectors in the main.less file, take a few minutes to read through the comments and instructions within the theme file. If you are still not sure which selector to edit, refer the following resources:

  • Understanding selectors - Reference tables providing information on the code elements that are impacted by a particular selector
  • Use the Token Inspector - Use the Token Inspector to "inspect" a particular file and highlight the code elements impacted by a particular selector.
  • If you want to edit the code colors for comments, or adjust the highlighting color of paired tags, see the example code snippets listed in Code customization examples.

Now that you know the selectors that you need to edit, make the changes to the main.less file.

  1. Go to the end of the file until you see the following comment:

    /* Custom code colors or overrides should start after this line */

  2. Type in the selectors for the code elements whose colors you want to edit. Use syntax similar to the following example:

    .cm-tag {color: #00D0D0; }

    Note:

    If you have multiple code languages within a single file, and you want to be able
    to distinguish each language with its own code colors, see Customize code colors for mixed code files.

  3. Group multiple selectors if you want to assign the same color for multiple elements. In the following example, multiple selectors separated by commas, are assigned a single color.

    .cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #cf681d;}

  4. To make code coloring customization specific to a file type, enclose the code element selectors within the file type selector as shown in the following example:

    .HTML{
    .cm-tag{ color: #00D0D0;}
    }
  5. After making your changes, save the file.

    Dreamweaver refreshes the Code view in all open documents with the new colors.

Note:

If there are any syntax errors or undefined variables in your changes, Dreamweaver does not load the custom code changes you have made, and instead reverts to the default Dark code theme.

Customize code colors for mixed code files

If you are working with mixed mode files (one file containing different coding languages) such as HTML/CSS, or HTML/PHP, or HTML/JavaScript, then you can customize code colors in the following way:

  1. Create a custom code theme following the instructions in Customize code themes. Select the new theme and apply it.

  2. Quit Dreamweaver.

  3. Open package.json in a text editor.

    On Windows: %appdata%\Adobe\Dreamweaver CC 2017\en_US\Configuration\Brackets\extensions\user\\

    On Mac: ~/Library/Application Support/Adobe/Dreamweaver CC 2017/en_US/Configuration/Brackets/extensions/user//

    Add the following line in theme{}: 

    "addModeClass": true

    Editing the package.json file
    Editing the package.json file

  4. Open Dreamweaver, select Edit > Preferences > Interface, select the new theme, and click the Edit icon.

  5. Add mode specific styles at the end of the main.less file.

    Use the selectors listed in the following table to edit code colors for the corresponding file type.

    Selector

    Code file type

    .cm-m-clike

    PHP

    .cm-m-css

    CSS, Less

    .cm-m-javascript

    JavaScript

    .cm-m-xml

    HTML, XML

    For example, to customize the code colors for tag names in CSS and style tags within HTML or PHP, use the following syntax:

    .cm-tag {color: #BD46BD;} 
    .cm-m-css.cm-tag {color: #38D08B;}
  6. Save the main.less file. 

    The code color changes are now reflected in your code files.

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;
Note:

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.

Selectors HTML CSS JavaScript PHP
.cm-atom  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
.cm-attribute  Attribute Name Media types such as all, braille, print, screen, and so on    
.cm-bracket Tag brackets such as <, >, /> and </      
.cm-builtin    ID selector   Built-in functions such as htmlspecialchars, trim, substr, and so on
.cm-comment  Comment Comment Comment Comments
.cm-def    "@ rule" variable, function definition and function parameter  The function name in function definition 
.cm-error  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    
.cm-keyword    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
.cm-meta  <!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, ?>
.cm-number    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.
.cm-operator      Operators: +, -, *, +=, !==, &&, >>>, and so on Operators like ===, &&, !, =>, +, -, and so on
.cm-property    Property name Object property or method  
.cm-qualifier    Class selector    
.cm-string  attribute value Regular string, like one passed to a url() call, font name within quotes, and so on. Literal string Literal string
.cm-string-2    Non standard properties like scrollbar-arrow-color, scrollbar-base-color, and so on. Regular expressions  
.cm-tag  Tag name Tag selector    
.cm-variable    Font names without quotes Global variables/functions, class references User defined function names, interface/class references, class properties, casts, 
.cm-variable-2    Custom properties such as main-bg-color Scoped variables/functions references User defined and predefined variables, parameters or attributes
.cm-variable-3   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.

Selector

Templates (DWT)

Library (LBI)

.cm-templateComment

Template comments

 

.cm-templateAttrVal

Attribute values in template comments

 

.cm-instanceParam

InstanceParam comment and attribute

 

.cm-instanceParamAttrVal

InstanceParam attribute values

 

.cm-libraryItem

 

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.

Selector

Code file type

.cm-m-clike

PHP

.cm-m-css

CSS, Less

.cm-m-javascript

JavaScript

.cm-m-xml

HTML, XML

Use the Token Inspector

To learn how the selectors in the main.less theme file affect code elements in code files (other than HTML, CSS, JavaScript, and PHP), use the Token Inspector.

  1. Open the Token Inspector using Google Chrome.

    The TokenInspector utility consists of these sections:

    • Code editor, 
    • An option to change modes, and 
    • A list of selectors on the right.
    Using the Token Inspector to understand the selectors
    Using the Token Inspector to understand the selectors

    A. Code Editor B. Change Mode option C. List of selectors 

  2. Copy and paste the contents of a file into the Code Editor.

  3. Change the mode of the file by typing in the filename extension and clicking Change mode.

    For example, if it is an HTML file, then change the filename extension to html. The page updates to reflect the change in mode and states the current mode at the top of the page.

    Mode indication in the Token Inspector
    Mode indication in the Token Inspector

  4. Select the code element whose appearance you want to modify.

    The Token Inspector then highlights the selector.

  5. (Optional) You can also select an individual selector to see what code elements in your code file are affected by that selector.

  6. Note down the selectors that you want to edit and update and close the Token Inspector.

More like this

 Adobe

Get help faster and easier

New user?