Looking through some of the submissions on the site, I was struck by how… well… random most of them are. Without meaning to be rude, they just look like someone went through the list, randomly assigning colors. Many many programmers believe coding and graphic design are polar opposites – that if you’re a coder, you must necessarily suffer from “programmer art”, and hence that it’s pointless to ever try to learn better design skills. I completely disagree with this diagnosis.

I’m going to use only one design rule for this color scheme – consistency: keep similar things similar, and make different things different.

Basics

I’ve already decided to create a “dark” theme, so the background will be black. I also want to highlight important or dangerous elements of the source, and downplay incidental aspects. This idea will modify each of the colors chosen, and help suggest colors where there is no clear choice. Each choice will be reflected as far as is possible across many file types – for example, a C# comment should probably be the same color as an XML one, a JavaScript one, etc.

I’m also going to make use of color shades. I know Visual Studio has to cater for people using low-color displays, remote desktop, and those with reduced vision, but its use of primary colors leaves it looking a little dated. Color shades can be used to bring the look a little more up-to-date, and to group related elements, while still being able to distinguish between them.

Comments – Green

Comments have always been green in Visual Studio, and I’m going to keep them that way – a vibrant green, made bold, to catch the eye. (If comments aren’t important, then why are you writing them?) Comment hyperlinks and the text in #region blocks also match.

Literals – Blue

String literals are red in the standard Visual Studio color scheme, but I wanted to reserve that color for errors and the like. In my mind strings are blue (don’t ask me why) so I’ve chosen a light blue for strings.

With consistency in mind, what else should match this?

• String literals are blue, so why not other literals, such as integers? The common color will highlight “magic values” in code.
• We’ll need to colorize XML and HTML, so we can make attribute values blue too.
• JavaScript and SQL obviously have literals.
• I’ve also chosen to see CSS values as literals – they go blue too. (You could easily argue the toss about that though).

Keywords – Gray

Since the background is black, ‘unadorned’ text will be white – a nice easy choice. How about keywords?

I want to make them a different color – so I can tell when I’ve typed ‘retrun’ for the billionth time – but I don’t consider them to be “core” code. I think of them as scaffolding around my identifiers. (Perhaps I’m a LISPer at heart). I’ve chosen to keep them a neutral color, but a dimmer shade, so they fade out – hence gray.

Types – Yellow/Orange

Colorizing types is handy as it again allows me to see when I’ve mis-typed something. I want them to stand out (so a dim color is out), and I don’t want them confused with anything else – so reds, greens, and blues are gone. Yellows and light oranges seem a good choice – close enough to the normal white text, but sufficiently different to catch the eye. I’ve chosen a light orange for types, and highlighted interface types as yellow. (I figure that looking at how interfaces are defined and used is often a good way to understand the structure of a body of code – hence the slightly more eye-catching color).

(Oddly enough, this doesn’t seem to work for types in C++ – they always seem to come out white. Not sure why.)

Errors, Warnings, and Oddities – Red

This was an easy color to choose – red (for me) means stop and think. There are a few code constructs that I wanted to highlight as either dangerous or needing attention:

• Compiler errors and warnings;
• Preprocessor directives;
• Breakpoints.

Editor Overlays – Purple/Dark Blue

Visual Studio now highlights parts of the source depending on where youyr cursor is – it highlights matching braces, and will also display all usages of the symbol at the caret. These display can change rapidly, so shouldn’t be too distracting. I’ve chosen a dark purple, which is subtly visible, but which blends in with the black background.

We need a related color for the selection too, so I’ve chosen dark blue.

Omissions

There’s still quite a few entries in the colors list I haven’t filled out – the main areas being:

• VB.NET;
• XSLT
• IntelliTrace
• Test Coverage

If you fancy addressing these omissions and sending me back an updated settings file, I’ll be happy to credit you.

Conclusion & Download

So there you go. Obviously color schemes are very personal (and contentious). I think I’ve done a pretty good job; you might well think otherwise. Even if you don’t like this particular scheme, I hope you’ll agree that setting a few design principles in place before assigning colors can help you choose (and use) the colors effectively.

Sadly there’s no way to upload my settings to StudioStyles, and I’m too lazy to re-do all the work by hand. Until they allow that option, I’ll host the settings from here:

Download hackification.vssettings

Save this file somewhere, then use Tools -> Import and Export Settings… to merge them in.

I’m sure most web developers know about image rollovers (using separate images for normal and “hover” states of anchors). Hopefully also the use of “CSS Sprites” is becoming better known – combining the normal and rollover images into a single physical image file to speed up load times and reduce flicker. I won’t cover those techniques here.

However, if you want the anchor or button to size to its contents, it’s more difficult to make use of these techniques. Here’s one way.

(The final result – view demo).

Start With Markup

Before diving into fancy techniques, get the markup down as you would like it, if you didn’t have to style anything.

<a href="..." class="rollover">Button Text</a>

Ideally we want the markup to be clean and not compromised by styling requirements.

Handle Degradation Gracefully

My technique is going to make use of JavaScript, so let’s handle the case where the user has it disabled for some reason. Here’s some very basic CSS to give the button a simple style:

a.rollover
{
  background-color: #00f;
  border: solid 1px #000;
  color: #fff;
  font-weight: bold;
  padding: 4px;
  text-decoration: none;
}

a.rollover:hover
{
  background-color: #008;
}

Add Styling Naively

Next, I’m going to add some rollover styling – but in a way that isn’t complete. Firstly I created a simple rollover image, but made it very wide – it needs to be at least as wide as the widest button is ever going to be:

I’m going to define my rollover styling against a class selector of “extra” – you’ll see where that comes from in a moment.

a.rollover.extra
{
  background: url(buttons.png) repeat-x left 0;
  border: none;
  height: 27px;
  padding: 23px 40px 10px 40px;
  position: relative;
}

a.rollover.extra:hover
{
  background-position: left -57px;
}

Note that we’ve had to undo some of the styles applied previously, such as border.

We’re kind of getting there, but our buttons won’t look correct on the right-hand-side.

Use JavaScript To Add Styling Markup

To fix the right-hand end-caps, we need to modify our markup. However, I really don’t want to have to do that on my pages – afterall, I might change my mind about the site styling.

Here I recommend using JavaScript to tweak at runtime the markup to what we need. I’m going to use jQuery for this:

$(function() {
  $('.rollover')
    .addClass('extra')
    .append('<div class="cap"></div>');
});

Basically, when the pad is ready, I find all elements with class “rollover”, add another class (“extra”), and append into the rollover button an empty span element which has a class of “cap”.

That class “extra” triggers the image rollovers. The “cap” span can be styled as follows:

a.rollover.extra .cap
{
  background: url(buttons.png) no-repeat right 0;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
}

a.rollover.extra:hover .cap
{
  background-position: right -57px;
}

And voila!

If you’d like to see this technique in action, please view the demo.

I wanted to be able to block the front page into related areas: new articles, “hot” articles, and article groups (such as my ray-tracing series). I also wanted to be able to present myself in a slightly more structured way than with the old ‘About’ page (which is still there… but I now have a structure to expand into).

I’ve split the page into six main columns:

• Recent articles, showcasing the three most recent articles, with summary text and more obvious dates;
• Featured articles, starting with the “hot” articles (including approximate page view counts), and a couple of starter topics (web development and ray-tracing);
• ‘About Me’ and ‘Hire Me’, areas that I’ll build on later, which are probably never going to be viewed, but you never know;
• Archives, for searching and spidering;
• and finally of course adverts, because 10Gb of bandwidth per month isn’t free.

Currently the page is a little blocky and needs a little more styling, but that will have to wait. It also needs some more featured sections, but again that will happen as I write more articles and they naturally group together.