A dark code view theme for Dreamweaver
Written May 25, 2009. 159 comments.
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.
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 CS3 onwareds) 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)
or C:\Users\%username%\AppData\Roaming\Adobe\Dreamweaver CS4\en_US\Configuration\CodeColoring (on Windows 7) - 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.
Update: I can confirm this also works on Dreamweaver CS5.
Start of pageWho is That Web Guy?
Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.
%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!
I’m on a Mac and didn’t require a reboot by the way.
but i like your pastel colors very much.
guy, you made me changed my own scheme to yours. i give you that…
C:\Users\%username%\AppData\Roaming\Adobe\Dreamweaver 9\Configuration\CodeColoring
have a nice day
Here is my dark colorization for Dreamweaver http://www.sramekdesign.com/dreamweaver/dark-coding-colorization-for-dreamweaver/
Choosing something suitable can be tricky.
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
I started an article a little while back on alternative code fonts and might even publish it soon.
Btw the site design and usability on this site is just lovely, and the code captcha makes me smile :)
Harmony
http://www.harmonysteel.com
http://www.alarinmusic.com
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 :)
Thanks!
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á…
good luck
any support for that?
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.
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!
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
It’s just awsome!
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
Have you ever think about porting Monokai to Dreamweaver? That would be AWESOME!
shared it on twitter for your efforts… payin it forward.
=)
cheers,
//dave
C:\Users\[username]\AppData\Roaming\Adobe\Dreamweaver CS4\en_US\Configuration\CodeColoring
Thanks for the great color scheme!
Thanks for the Windows 7 tips. I did your suggestions and it worked! Windows 7 64bit – I moved all the current color.xml files like asp xml to a backup folder and placed the new color file in there on its own!!
works great!!
Thanks!! :)
My biggest dislike is also with the default font. With all my other editors I can change the font, is this not possible with DW? Also with my other editors that use CSS to style the colors, I can set the background to be transparent, is that not possible with DW? If not are either of those options possible with DW5?
You can change the font in Dreamweaver: http://www.thatwebguyblog.com/post/5_good_programming_fonts
I’m pretty certain there is no transparency support though. I wouldn’t use it anyway – I like my code to be totally legible while I’m working on it.
This should save others some time and effort if they need to get the exact colors.
Much love!
Thanks!
http://www.thatwebguyblog.com/wp-content/uploads/2011/12/colors.zip
Thanks!
Adobe Dreamweaver CS5 HTML5 Pack:
http://labs.adobe.com/technologies/html5pack/
I spent a half hour trying to figure out why it was not working. The key is to make sure you remove the original Colors.XML file from the C:\Users\*YOUR USERNAME*\AppData\Roaming\Adobe\Dreamweaver CS4\en_US\Configuration\CodeColoring folder.
I backed up the original file by renaming it and leaving it in the same directory as the new one. The sneaky part is that Dreamweaver will parse ALL of the .xml files in the folder, so if you don’t move it somewhere else (like the parent folder), it will parse it and undo the changes that the new colors.xml file applied to your color scheme.
So if it isn’t working for you, make sure to remove the original from the folder, then start up Dreamweaver and see if it works.
You changed the default settings for Dreamweaver. The correct path for the location of YOUR config settings is something like:
C:\Users\(username)\AppData\Roaming\Adobe\Dreamweaver CS4\en_US\Configuration\CodeColoring
It might be slightly different depending on your OS, and remember that the AppData folder is hidden.
Do you maybe know if there is a possibilty to change the colors individually for brace ( and curly brace { in javascript?
I would like to give them each a different color.
The only place I found in CS4 on line 53 is this for all types of brace or brackets:
Any idea?
Now if someone can write a visual studio theme to dreamweaver theme convertor for studiostyl.es
http://letitbit.net/download/04463.0e551f572ceca17ea80f6828857d/Dreamweaver-ColoringCode-folder-CS4-CS5.rar.html
Quite perfect!
Cheers for the feedback.
http://visualplastik.com/stuff/Colors.xml
Pretty easy to just copy paste FYI.
I had a dark color scheme for one of my other coding programs, this one is similar
FYI: This is the path I had to use in Vista
C:\Users\**username**\AppData\Roaming\Adobe\Dreamweaver CS4\en_US\Configuration\CodeColoring
Best regards,
I’ve amended the article to include the path for Windows 7. Something I probably should have done a while ago :-)
username/Library/Application Support/Adobe/Dreamweaver CSx/en_US/Configuration/CodeColoring/Colors.xml
Thanks again!
Here is the kicker. If I take the contents of the newly created XHTML Strict doc, and paste them into a newly created XHTML Transitional doc the coloring is fine.
I don’t know if this is an issue with the coloring scheme as it is with Dreamweaver, but just thought I would point it out to you.
It happens if you select ColdFusion, JSP, or any of the ASP Page Types.
bgcolor=”#F8DOAF”
which needs to be corrected so that the “O” is a “0″
Thanks for this. Ive just used your xml file and most of your pc instructions to do the same on a Mac using DMWVR CS4. Worked like a charm and my eyes thank you for it.
Cheers
G
But: can anyone please give me the original colors.xml file? I deleted mine…. :)
thx, Jan
Here you go – see this comment: http://www.thatwebguyblog.com/post/a_dark_code_view_theme_for_dreamweaver#comm456
Here you go: http://thatwebguyblog.com/media/file/colors.zip
Thank you to whoever thought up this simple but brilliant idea.
And to undo it’s very fast just by taking back the old color.xml.
Reminds me the real programmers :-D
Loving this.
It works just fine for CS5. I’m using it now in fact. In Windows 7 navigate to:
C:\Users\%username%\Application Data\Adobe\Dreamweaver CS5\en_US\Configuration\CodeColoring
Look for a similar directory structure if you’re using a different OS. It shouldn’t be too difficult to work out.
Really like this theme, thanks for sharing.
I’m having problems with the theme being picked up when editing .less files. Any idea how to get this working?
I have edited the /Applications/Adobe Dreamweaver CS5/Configuration/DocumentTypes/MMDocumentTypes.xml adding .less to macfileextension but to no avail. Any help would be appreciated.
Can I add less to the Colors.xml – like say copy over the CSS definitions?
Thanks again
user/Library/Application Support/Adobe/Dreamweaver/CS5/en_US/Configuration/DocumentTypes/MMDocumentTypes.xml
I added ‘macfileextension=”css,less”‘ and whoopee it worked. Thanks again for the theme :)
if u cant see the /appdata try turning on the show hidden folders in the control panel
cheeeers
… color doesn’t work for .xsl documents?