Dynamic Color Themes via Alternate Stylesheets

No Comments »

February 5th, 2008

In the upper right hand corner of this website, I’ve added 4 color themes (ok, they’ve been there for a while now, but I haven’t gotten around to writing about it until now). As I was designing this website, I had trouble deciding on a color theme so rather than deciding on one theme, I wanted to figure out a way to have several different color options. As I was researching different ways to implement these dynamic stylesheets, I came across a Javascript style switcher on A List Apart and then a PHP implementation.

My implementation is basically a modified version of the PHP code from the article. I decided to use PHP over Javascript for a number of reasons, but mainly because PHP is processed on the server side and will work even if the user turns off Javascript in their browser. The changes I made from the code in the original article are mostly just extra validation before setting the cookie. Both implementations use cookies to store the selected color theme so that the selection persists between pages and between sessions.

To try it out just click one of the colors in the upper right corner. Let me know which theme is your favorite.