Change Code Color Theme – Dreamweaver CS6

Video

 

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!