A dark code view theme for Dreamweaver

Written by That Web Guy on 25th May 2009. 54 comments

Follow me on Twitter

I don't know about you, but sometimes I tire of looking at a bright white code view all the time. Dreamweaver has a great coding environment but the default colour scheme isn't always suitable, especially when your coding in the dark.

Luckily you can change the default code view colour scheme, although it's a bit time consuming and there is a lot of trial and error. But if you're feeling particularly lazy, and you like the look of the theme I have happening in the screenshot below, then you're in luck.

dreamweaver dark code theme

I tailored this theme a few weeks ago and today I realised I have no intention of going back, so I've now transferred it to my laptop and office work station.

Follow the instructions below (only tested on Dreamweaver 3) if you'd like to take it for a test drive. You can revert back to the original theme if you don't like it.

Instructions for Windows only

1) Close Dreamweaver
2) Browse to: C:\Documents and Settings\%username%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\ (on WinXP)
or C:\Users\%username%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\ (on Vista)
3) Rename the Colors.xml file to something different - say Colors2.xml (This will be the file you go back to if you don't like the new colour scheme)
4) Download and extract the the zip at the end of this article to the location you opened at point 2.
5) Open Dreamweaver and go to Edit/Preferences/Code Colouring and change the default background colour to #252A32

You're done. Open a file and switch to code view to see the new colour scheme. Combine this with a good programming font and things get even better.

I don't like it! Put it back!

Changed your mind? No problem. Just close Dreamweaver, delete the Colors.xml file and then rename Colors2.xml back to Colors.xml. Oh and don't forget to change the default background colour to #FFFFFF in the preferences (ala point 5).

If there are any CS4 users out there who can confirm this works for them, please leave a comment.

Update: @todayinart has confirmed this also works for Dreamweaver CS4 on the Mac with the path being slightly different. See his comment below. Cheers for that matey.

dreamweaver_colours.zip (3k)

About That Web Guy

That Web Guy (Mikey to his friends) is a veteran web designer based in Perth, Western Australia, and currently Senior Designer at Titan Interactive. Mikey's work has been featured on many CSS showcase web sites and when he's not XHTML'ing or messing around in Photoshop, he can usually be found preaching web standards evangelism upon unsuspecting victims.

Feel free to send That Web Guy a message some time, follow him on Twitter, or make a donation.

Comments

Carerra Davis

Worked like a charm. Is there a way to make the dreamweaver interface a darker theme?

Tuesday 26th May 2009 | 06:10 AM Reply Comment URL Back to top

That Web Guy

Responding to this comment by Carerra Davis

I've had a look around before and didn't find a way to skin the actual interface components. That would be pretty cool.

Tuesday 26th May 2009 | 07:51 AM Reply Comment URL Profile Back to top

Beth

Didn't work for me

Tuesday 26th May 2009 | 07:52 AM Reply Comment URL Back to top

Beth

Ignore me I forgot part 5 - now looks fine. I can get used to this.

Tuesday 26th May 2009 | 07:54 AM Reply Comment URL Back to top

That Web Guy

Responding to this comment by Beth

Glad you like it.

Tuesday 26th May 2009 | 07:17 PM Reply Comment URL Profile Back to top

CSS Babe

That's so much nicer.

Wednesday 27th May 2009 | 06:50 AM Reply Comment URL Profile Back to top

@todayinart

Worked great on a Mac 10.5 w/ CS4, but here are some specifics for those peeps to keep in mind. On the Mac there are 2 places that have the colors.xml. One is for global use and one is for the user. Go to:

%machineName%\Users\%username%\Library\Application Support\Adobe\Dreamweaver CS4\en_US\Configuration\CodeColoring\Colors.xml

Do everything else as listed above. I did have to restart my machine to get it to work though.

Thanks for the Color Scheme. Saved me loads of time!

Wednesday 27th May 2009 | 09:02 PM Reply Comment URL Profile Back to top

That Web Guy

Responding to this comment by @todayinart

No sir, thank you! I've updated the article at the end with a link to your comment about CS4 on Mac.

Thursday 28th May 2009 | 05:59 AM Reply Comment URL Profile Back to top

Adrian Harding

Hey, just stumbled on this post from Google. Love the colour scheme, much easier on the eyes :).

I'm on a Mac and didn't require a reboot by the way.

Saturday 6th June 2009 | 05:15 AM Reply Comment URL Back to top

kHa

i've been using black screen since it was really black (or blue). i always take my time and change defaults of every editor i used before.
but i like your pastel colors very much.
guy, you made me changed my own scheme to yours. i give you that...

Saturday 6th June 2009 | 11:09 AM Reply Comment URL Profile Back to top

Hayden

Love it! just what I was looking for. THANKS!

Tuesday 9th June 2009 | 09:41 PM Reply Comment URL Back to top

Chris B.

Thank you for this, I was editing my file and saw I had to do the PHP coloring by hand and gave up. It is so much easier for me to read now.

Tuesday 16th June 2009 | 11:50 AM Reply Comment URL Back to top

kHa

guyz, i forget to write but correct file location for Vista sould be like following:

C:\Users\%username%\AppData\Roaming\Adobe\Dreamweaver 9\Configuration\CodeColoring

have a nice day

Tuesday 23rd June 2009 | 01:10 PM Reply Comment URL Profile Back to top

Tom

I made my dark code colorization for Dreamweaver. You can download it here http://www.sramekdesign.com/dreamweaver/dark-coding-colorization-for-dreamweaver/

Saturday 4th July 2009 | 07:12 PM Reply Comment URL Back to top

wee

works for me on dreamweaver 8, however do you know how to tweak the color of the highlight selection ? currently its on gray.

Monday 6th July 2009 | 04:11 PM Reply Comment URL Back to top

Harun Smrkovic

Can I change font in code view ?

Monday 6th July 2009 | 07:49 PM Reply Comment URL Profile Back to top

That Web Guy

Responding to this comment by Harun Smrkovic

Yes you can. Preferences -> Fonts -> Code View

Choosing something suitable can be tricky.

Monday 6th July 2009 | 07:51 PM Reply Comment URL Profile Back to top

Harun Smrkovic

Mikey, have You ever used Zend Studio Eclipse ?
I love that app, but font there is even more ugly than one in Dreamweaver, and I can't seem to find a way how to fix it.. Do you ? :D :D

Monday 6th July 2009 | 09:15 PM Reply Comment URL Profile Back to top

That Web Guy

Responding to this comment by Harun Smrkovic

I've used it and I reckon it's the best of the free web dev apps out there. From memory I know you can change the theme but I'm not sure about the fonts.

I started an article a little while back on alternative code fonts and might even publish it soon.

Wednesday 8th July 2009 | 06:53 AM Reply Comment URL Profile Back to top

Harmony

Another great article from you! (found via your latest blog post on Dreamweaver code-view fonts). Thanks as always for sharing these useful tidbits and tools, they're much appreciated.

Btw the site design and usability on this site is just lovely, and the code captcha makes me smile :)

Harmony

www.harmonysteel.com
www.alarinmusic.com

Saturday 11th July 2009 | 04:18 PM Reply Comment URL Back to top

That Web Guy

Responding to this comment by Harmony

Thanks a bunch for the kind words Harmony. I think you and I will get along famously :-)

Saturday 11th July 2009 | 05:46 PM Reply Comment URL Profile Back to top

Randy

Thanks a bunch man, saved me an hour of trail/error : ) and for your captcha, what if i didnt know who elvis was? I was born in 84! You need a picture of tupac or ex president bush

Friday 21st August 2009 | 02:35 AM Reply Comment URL Back to top

Anna

Tested for CS4 on a PC (XP) - it *works* in the sense that new colors are applied but they are not the same as what is shown in the screen shot in the post. Most everything is a different shade of blue. The path is different also:
C:\Program Files\Adobe\Adobe Dreamweaver CS4\configuration\CodeColoring
Didn't require a reboot.
Maybe this is the global and I need to change user settings too? Haven't had time to play around with it yet but definitely better than the default, with some tweaking. Thanks :)

Thursday 8th October 2009 | 03:14 AM Reply Comment URL Back to top

That Web Guy

Responding to this comment by Anna

Thanks Anna. If you get it sorted be sure to post your results here. Enquiring minds want to know :-)

Thursday 8th October 2009 | 09:02 AM Reply Comment URL Profile Back to top

dthomas

I had an issue with WinXP Dreamweaver CS4 that required me to delete the applications cache file but other than that works great.

Thanks!

Friday 9th October 2009 | 04:47 AM Reply Comment URL Back to top

diogo

for dreamweaver cs4 and windows 7:

this post from dreamweaver help file:
"From David Powers (moderator):
Mark, the colours are saved in a file called Colors.xml in the CodeColoring subfolder of each user's personal configuration folder. (...) For Dreamweaver CS4, it’s as follows:

Windows 7: C:\Users\\AppData\Roaming\Adobe\Dreamweaver
CS4\\Configuration\CodeColoring

A very crude way of reverting to the standard colours is to delete your personal configuration folder. Dreamweaver then automatically creates a new one with all the default settings when the program is next launched. However, this deletes any other preferences you might have set. A less destructive approach is to rename your personal configuration folder temporarily, and relaunch Dreamweaver. You can then copy the new version of Colors.xml to your renamed configuration folder, delete the newly created one, and change the name of your backup to Configuration."

I deleted all the files in the CodeColoring folder and pasted the colors.xml from this site. Restarted Dreamweaver, and voilá...

Sunday 25th October 2009 | 02:21 AM Reply Comment URL Back to top

Onur

I could not use this for my Macromedia Dreamweaver 8 :) do you have any fixes for this?

Saturday 31st October 2009 | 06:21 AM Reply Comment URL Back to top

That Web Guy

Responding to this comment by Onur

None that I'm aware of sorry. Maybe someone else has an idea?

Saturday 31st October 2009 | 03:38 PM Reply Comment URL Profile Back to top

Toon

I have DW8, and it worked just fine. You have to overwrite (make a backup though) the file in this directory: " C:\Documents and Settings\%UserName%\Application Data\Macromedia\Dreamweaver 8\Configuration\CodeColoring\Colors.xml"

good luck

Tuesday 3rd November 2009 | 02:49 AM Reply Comment URL Back to top

haldun boz

thanks it was awsome!! :)

Wednesday 4th November 2009 | 06:18 AM Reply Comment URL Back to top

franky b

How about ASP VBScript?
any support for that?

Sunday 8th November 2009 | 02:03 PM Reply Comment URL Back to top

That Web Guy

Responding to this comment by franky b

Sorry Franky, I never took it that far as I don't venture into that territory.

Sunday 8th November 2009 | 02:25 PM Reply Comment URL Profile Back to top

ScottFoley

Wow...what a difference. I immediately noticed my eyes relax. I bet this will help with eye strain. Thank you!

Thursday 12th November 2009 | 08:57 AM Reply Comment URL Profile Back to top

That Web Guy

Responding to this comment by ScottFoley

Anytime!

Thursday 12th November 2009 | 10:12 AM Reply Comment URL Profile Back to top

bigpapa

thank you bro!

Thursday 12th November 2009 | 11:42 PM Reply Comment URL Back to top

Ricardo Zea

I tried it on Dreamweaver CS4 in WinXP, but I had to place the 'Colors.xml' in two places for it to work for me:

1. C:\Documents and Settings\%user%\Application Data\Adobe\Dreamweaver CS4\en_US\Configuration\CodeColoring\

and

2. C:\Program Files\Adobe\Adobe Dreamweaver CS4\configuration\CodeColoring\

--

Also, as an FYI, the color scheme from http://www.sramekdesign.com/dreamweaver/dark-coding-colorization-for-dreamweaver/ and this one here are exactly the same. Both files weigh "14.3 KB (14,680 bytes)".

I also decided to use a darker background: #191919.

--

There should be an Extension for Color Coding Themes for Dreamweaver.

Thanks a lot for the info Mr. WebGuy, extremely helpful.

Friday 20th November 2009 | 12:33 AM Reply Comment URL Back to top

Fred

DW8 + your theme + DIV tags= nearly invisible!

Do you know what DW8 refers to DIV tags as please? They come out as a dark blue, which nearly matches the hues of the dark backgrounds making them hard to see.

I can't seem to find DIV tags in the colour preferences, and it's driving me bonkers..

Thanks for the theme though, now DW looks nearly as good as Komodo Edit 5!

Friday 20th November 2009 | 02:10 AM Reply Comment URL Back to top

Bryan

very nice thanks! darker is better :)

Saturday 5th December 2009 | 12:07 AM Reply Comment URL Back to top

IkeaTheSofa

Responding to this comment by diogo

Thanks for your comment Diogo. I'd been screwing around trying to get this work right on Vista 64 and though I follow the instructions above, could not get it right.

I then tried what you suggested, deleted everything in code color folder (under user appdata) and pasted colors.xml and BAM! Kicked it up a notch.

IkeaTheSofa

Tuesday 15th December 2009 | 07:33 AM Reply Comment URL Back to top

Koen Schmeets

I'm also using it at home and at work now,
It's just awsome!

Wednesday 30th December 2009 | 11:05 PM Reply Comment URL Back to top

Caleb Kester

I have to say, i've used this twice now (once pre-7 now on 7 with CS3) and I have to say this is an extremely good theme. I normally don't post comments on stuff but props to you, it's awesome!

Note, I did make one change for text files, currently the background and font are really close to the same, I just changed the font color to be: #0099FF

Thursday 31st December 2009 | 02:10 AM Reply Comment URL Back to top

That Web Guy

Responding to this comment by Caleb Kester

Thanks for the compliment and I'm glad you liked it. Light blue for the font hey?

Thursday 31st December 2009 | 11:25 AM Reply Comment URL Profile Back to top

Jesus Estrada

Great job! I like how it seems and it's better for my eyes, the #FFF color in the background sometimes makes me get tired

Thursday 31st December 2009 | 12:02 PM Reply Comment URL Back to top

That Web Guy

Responding to this comment by Jesus Estrada

Cool. If I could suggest combining this theme with Droid Sans or one of these other fonts and you're all set. Droid Sans is an awesome code font: http://www.thatwebguyblog.com/post/5_good_programming_fonts

Thursday 31st December 2009 | 12:16 PM Reply Comment URL Profile Back to top

Roman

Спасибо за тёмные цвета, а то самаому как-то впадло их было подбирать!

Friday 15th January 2010 | 03:12 AM Reply Comment URL Back to top

Jason

Thank you! This is a very nice theme. I get very tired of looking at white with sharp colors. This theme is quite relaxing. Thank you!

Sunday 17th January 2010 | 10:23 AM Reply Comment URL Back to top

Erkan RUA

Bad color don't install.Default very beatiful

Wednesday 20th January 2010 | 01:19 AM Reply Comment URL Back to top

Phil

Thanks a lot, i did get some Javascript errors at some point. Removed it and reinstalled it. I'll let u know if it pops up again. It works perfectly on my pc at home (Win7)

Thursday 21st January 2010 | 04:00 PM Reply Comment URL Back to top

That Web Guy

Responding to this comment by Phil

Awesomeness. That's the same platform I use with Dreamweaver CS3. Not sure why you got JS errors though. At least it's working now.

Thursday 21st January 2010 | 08:19 PM Reply Comment URL Profile Back to top

Nillerz

I am using Dreamweaver CS4, and it appears to be working! I have tested it with PHP, CSS, and HTML pages.

Sunday 14th February 2010 | 06:05 AM Reply Comment URL Back to top

Pablo Bustamante

Hi! Kudos on the great work!
Have you ever think about porting Monokai to Dreamweaver? That would be AWESOME!

Wednesday 17th February 2010 | 12:23 PM Reply Comment URL Back to top

Jeff Lyon

Hi, this is pretty much a life saver. Or at least an eye saver. Great work and thanks!

Tuesday 23rd February 2010 | 09:28 AM Reply Comment URL Back to top

Laneth Sffarlenn

Just wanted to pass on my thanks for serving this up here - it is, as Jeff above me said, a life / eye saver. Your colours are much more complimentary to the hit-and-miss theme I'd created for myself :P

Thursday 25th February 2010 | 05:43 PM Reply Comment URL Back to top

That Web Guy

Responding to this comment by Laneth Sffarlenn

Thanks Laneth - glad you liked the theme.

Friday 26th February 2010 | 09:44 AM Reply Comment URL Profile Back to top

That Web Guy Blog

A dark code view theme for Dreamweaver

Follow me on Twitter

Instructions for Windows only

I don't like it! Put it back!

About That Web Guy

Comments

Are you human?

Login to That Web Guy Blog

That Web Guy Blog

A dark code view theme for Dreamweaver

Follow me on Twitter

Instructions for Windows only

I don't like it! Put it back!

Is this worth sharing?

About That Web Guy

Comments

Are you human?

Login to That Web Guy Blog