How to Change Adobe Dreamweaver Code View Theme

By Brian Voo. in Desktop. Updated on July 16, 2023.

You have probably been told that staring at bright computer screens for a long period is bad for your eyes. You might reply that we have dark themed websites and the dark backgrounds are cutting down on the damage caused. Plus, dark themes can make anything look a whole lot cooler.

If you work on Dreamweaver a lot, you might like this particular tip we have for you. We found a way to change the HTML view on Adobe’s Dreamweaver into ‘night mode’, thanks to CS6Shortcuts.com.

This is a really cool trick for coders, designers or developers working on Dreamweaver. It works on Adobe Dreamweaver CS6, CS5.5, CS4, CS3 and on both Windows and Mac platforms. And if you don’t like it, it’s easily reversible.

Here’s how you set it up.

Changing Dreamweaver Coding Theme

First, you will have to download this Colors.xml file, the file that will change the colors of the HTML tags and its elements.

Replace Colors.xml file

With Dreamweaver closed, navigate to the folder where the Colors.xml file is.

Windows XP

OS hard drive > Documents and Settings > [yourusername] > Application Data > Adobe > Dreamweaver > Configuration > CodeColoring.

Windows Vista:

OS hard drive > Users > [yourusername] > Application Data > Adobe > Dreamweaver > Configuration > CodeColoring.

Windows 7 & 8:

OS hard drive > Users > [yourusername] > AppData > Roaming > Adobe > Dreamweaver > en_US > Configuration > CodeColoring.

Mac

[username] > Library > Application Support > Adobe > Dreamweaver > en_US > Configuration > CodeColoring.

Upon entering the CodeColoring folder, you’ll see a single Colors.xml file.

Rename the file to Colors_Original.xml. By doing this, you can keep the original file, for if you want to revert to default settings.

Move or Copy and Paste the Colors.xml file into the same folder.

Changing Background Color

With the light colored text settings inserted, you will have to change the default background color of the code window from white to black.

To do this, open Dreamweaver and press Ctrl + U to open the Preferences. Look for Code Coloring on the right panel and change the Default Background color setting to something dark.

A pure black background might not work so well because it will contrast with the white text too much, so a color like #2B2E46 works really well; you can experiment with other dark colors to find one that suits you best.

Revert To Default Settings

If you do not really like the change, the process is easily removed.

Remove the just inserted Colors.xml file. Then, rename the Colors_Original.xml file to just Colors.xml.

Then in Dreamweaver, press Ctrl + U to open up the Preferences, click on Code Coloring on the right panel and change the Default Background from black to the color white.