Introducing the color switcher

I've just relaunched my portfolio website, and one of the main new features is the color switcher (pictured above). I realized a few things about my site as I was considering a redesign:

• My site has a very simple color pallette - black, white, and green - but the green was chosen somewhat arbitrarily. Why not a different color?
• My site should be more than just a place to show images of my work, it should show some of my coding ability as well.
• Some of the best design firm/portfolio sites I've seen add a level of interactivity that engages the visitor.

Those three concepts tied together quite well in the concept of the color switcher. I used the code from this helpful tutorial at A List Apart and removed all color declarations from my primary CSS style sheet (sorry if this is a bit codey for the non-coders), and then created seven style sheets that dealt only with colors. It also creates a cookie which remembers what color you last chose when you return to the site.

All in all, it is a fairly simple concept that can be executed in larger ways for other sites, such as changing font sizes or allowing re-skinning for users, and can extend well beyond colors into entirely reformatting the visual structure. CSS Zen Garden is a good example of this taken to the extreme, although unlike CSS Zen Garden, my color switcher requires no page refresh.

Pretty neat, huh?