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”.
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.
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
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”.
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.
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.
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”.
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.
