Change Code Color Theme – Dreamweaver CS6

1. Get The Theme

While Dreamweaver allows us to customize every little aspect of the code we write, creating the whole look can be quite time consuming and there is a whole bunch of trial-and-error. I’ve found an amazing Dreamweaver color theme which you can download for free right here: http://www.thatwebguyblog.com/post/a_dark_code_view_theme_for_dreamweaver/ You’re looking for the file named “Colors.xml”.

Change Code Color Theme - Dreamweaver CS6

2. Checking Out The Default

Jump over to the Code view in Dreamweaver and bask in the harsh glow of the stark white background, the bright blues, greens, and the blacks. This is a particularly lovely color scheme to code with when you’re working in a darker area or are writing code for a number of hours each day. Let’s have some mercy on our eyes and pepper in some goodness and beauty with an updated color theme for our Dreamweaver Code view.

Change Code Color Theme - Dreamweaver CS6

3. Close Dreamweaver & Find Directory

Close Dreamweaver and navigate to the folder on your computer where the current “Colors.xml” is located for your copy of Dreamweaver. Here are the paths that I am aware of (feel free to share yours in the comments if you find that your path is different).

Windows XP: C:\Documents and Settings\%username%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring
Windows Vista: C:\Users\%username%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring
Windows 7: C:\Users\%username%\AppData\Roaming\Adobe\Dreamweaver CS4\en_US\Configuration\CodeColoring
Mac: Macintosh HD:Users::Library:Application Support:Adobe:Dreamweaver 9:Configuration:CodeColoring

Change Code Color Theme - Dreamweaver CS6

4. Rename The Old Theme

To save the default color scheme for Dreamweaver just in case we don’t like our new color scheme, simply rename your “Colors.xml” to “Colors-old.xml”.

Change Code Color Theme - Dreamweaver CS6

5. Drag In The New Theme

Unzip and drag the new “Colors.xml” file into the folder to set this new theme as the coding color scheme in Dreamweaver.

Change Code Color Theme - Dreamweaver CS6

6. Fire Up Dreamweaver & Check Out The Beauty

Open Dreamweaver again and check out code view now. We’re not quite out of the woods yet, but we’ve made progress. Don’t panic! We’ll pull this together in just a second.

Change Code Color Theme - Dreamweaver CS6

7. Pulling It Together With The Background Color

We simply need to change the background color to make this all look great. Go Edit>Preferences (Cmd/Ctrl + U) and select “Code Coloring” on the left side and set “Default background” to “#003”.

Change Code Color Theme - Dreamweaver CS6

Change Code Color Theme - Dreamweaver CS6

8. Bonus: Change Your Code Font

I’m up and down a little with my coding font, but sometimes it’s great to have a little changeup with our coding font. I have never done loads of research on code fonts, but two that I’ve run into and really enjoyed are Monaco(Free Download ») and Droid Sans Mono(Free Download »). You can change these fonts in the Preferences just like I have in the screenshot above.

Change Code Color Theme - Dreamweaver CS6

 

Follow Me On Twitter!

Like Tutvid on Facebook!

More from Nathaniel Dodson
The Extract Filter – Photoshop CS2
The Extract Filter In Photoshop CS2 Learn how to make and use...
Read More
Join the Conversation

47 Comments

  1. says: KL

    My Dreamweaver Code Color settings:

    Edit/Preferences/Fonts:
    Code view: „Cambria” Size: „14pt (Larger)”

    Edit/Preferences/Code Coloring:
    Default background: #333

    Edit/Preferences/Code Coloring/{PHP, HTML, CSS, and JavaScript }/Edit Coloring Scheme:
    All Background color: #333
    Text color:
    CSS @import #FCF
    CSS @media #F0F
    CSS Comment #999, italic
    CSS Important #6CC
    CSS Property #F6F
    CSS Selector #CCC
    CSS String #CCC
    CSS Value #69F
    HTML Anchor Tags #696
    HTML Attribute Value #69F
    HTML Comment #999, italic
    HTML Form Tags #FC0
    HTML Image Tags #C96
    HTML Number #6CC
    HTML Object Tags #F63
    HTML Other Tags #C96
    HTML Script Tags #C6F
    HTML Special Characters #C30
    HTML Style Tags #C6F
    HTML Table Tags #C96
    HTML tags #C96
    HTML Text #FFF
    Javascript Bracket #CCC
    Javascript Client Keywords #CCC
    Javascript Comment #999, italic
    Javascript Default text #CCC
    Javascript Function Keyword #FFF
    Javascript Identifier #CCC
    Javascript Native Keywords #6CF
    Javascript Number #6CC
    Javascript Operator #6CF
    Javascript RegExp #66F
    Javascript Reserved Keywords #6CF
    Javascript String #69F
    Library Items #666
    PHP Script Block Delimiter #6CF
    PHP Script Bracket #CCC
    PHP Script Built-in Variables #6C6
    PHP Script Comment #999, italic
    PHP Script Constants #69F
    PHP Script Default Text #CCC
    PHP Script Function Keyword #09F
    PHP Script Functions #CCC
    PHP Script Identifier #6CF
    PHP Script Number #6CC
    PHP Script Operator #FF6
    PHP Script Reserved Keywords #CCC
    PHP Script String #69F
    PHP Script Types #0CC
    PHP Script Variables #6C6
    PHP tags #09F

  2. Pingback: Fashion
  3. Pingback: dizi izle
  4. Pingback: Temporary SMS
  5. Pingback: Economics Tuition
  6. Pingback: Eric Cain
  7. Pingback: Daniel Myers
  8. Pingback: ayam laga
  9. Pingback: recycletotes.com
  10. Pingback: Agen Bandarq
  11. Pingback: yandex ankara
  12. Pingback: economics tuition
  13. Pingback: economics tuition
  14. Pingback: buy 1 ml syringes
  15. Pingback: ICQ Chat
  16. Pingback: yandex ankara
  17. Pingback: Weight loss
  18. Pingback: here
  19. Pingback: read
  20. Pingback: read more
  21. Pingback: anabol com
  22. Pingback: trenabol results
  23. Pingback: besins healthcare
  24. Pingback: buy cytomel t3
  25. Pingback: click
Leave a comment

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