Themes

Brackets has themes, so you can change the background colors of the editor and the colors of the code. To change the theme, select View > Themes, & the Themes Settings dialog box will open. By default, you have 2 choices:

• Brackets Dark
• Brackets Light (Default)

However, you can also install other themes. To do so, press Done to close the Themes Settings dialog box. Now press the Extension Manager button (the one that looks like a Lego piece on the right side of Brackets) so that the Extension Manager opens.

Click on the Themes button at the top of the Extension Manager. You have a lot to select from, so scroll through the list. If you see something that sounds interesting, click on Install & then go to View > Themes & select it from the list. If you like it, great—use it. If you don’t like it, go back to the Extension Manager, but this time click on Installed, & then find the Theme & click the Remove button next to it.

You should look for a Theme that makes clear distinctions between the colors of your code. In other words, your Theme should clearly distinguish between elements, attributes, & values. You do not want a theme that make it hard to tell what is what!

There are a few themes—& variations of those themes—that show up over & over again in text editors & tools for developers. They are certainly worth checking out & considering, but remember—if you find something you like better, go with that.

• Monokai
• Soda (Dark & Light)
• Solarized (Dark & Light)
• Obsidian

Personally, my favorite when I’m coding & not teaching is Monokai Dark Soda.

Font Size

Choose View > Themes so that the Themes Settings dialog box opens. Note that the Font Size by default is 12px. Now, you might find that works for you, but I think it’s way too small. I change it to 16px so that I see my code. My point is, play with Font Size until you get something you like.

Code Indentation

When you press the Tab key to indent text or code, how far is the indentation: 2 spaces? 4? Or something else? And does the editor use tabs or spaces when you press Tab? If you look in the bottom right of Brackets, you will see the default setting: Tab Size 4. In other words, pressing Tab inserts a Tab that is equivalent to 4 spaces.

If you like that, leave it. My recommendation, however, is Spaces 2. To change it to that, do the following:

• Click on Tab Size & it will change to Spaces
• Click on 4 & change it to 2

For more on the tabs or spaces debate, & why I recommend spaces instead of tabs, & 2 instead of 4, see Formatting & Indenting Your HTML on this website.