Build a CSS Stylesheet Theme Switcher with PHP

by Dean Hamack

January 22nd, 2009

A few months ago I joined a web accessibility discussion group called WebAim. Up until then, I thought accessibility was just about making websites work well for people using screenreaders. But I quickly learned that for every completely blind internet user, there are dozens more who have other vision impairments, such as color-blindness or "low-vision".

Most people with these impairments typically use either the High Contrast Mode (which is built into the Windows Operating System), or some kind of browser plugin to change the appearance of web pages and make them more readable. The problem is that people don’t always have access to their own machine while travelling, visiting friends, etc. Sites like the BBC’s offer accessibility options which allow users to change the the font size and colors on their page. But the manner in which they do it is complicated, and most low-vision users I’ve talked with seem to think it’s overkill. So off I went in search of a simple plugin that would allow users to change a page’s stylesheet quickly and easily.

Previous Versions

If you Google "style sheet switcher" or "theme switcher", you’ll come up with a bunch of hits. But almost all of them rely on JavaScript to do the work, and they either change the url of the page when activated, or redirect people to another page. And since approximately one in ten people have JS disabled, I use it strictly for enchancement of sites, and tend to use PHP for anything I need to work 100% of the time. I finally found an article on A List Apart on how to build a PHP version. But after beating my head against the wall for hours trying to make it work, I figured out it didn’t work on PHP 4 or 5.

Note to the folks at ALA: take down your seven year old articles! No one needs to read about stuff that doesn’t work anymore.

I wrote to the author Chris Clark, and he was kind enough to point me to an updated version of the script written by Rob Ballou.

Rob’s method works pretty well, but like the BBC’s offering, it’s a bit much. It uses radio buttons and sets of stylesheets. It also had a lot of redundant and unecessary code, and was complicated to set up. So I wrote dropped him a line and and got his permission to tweak it a bit.

The Updated Version

Rather than using using links or radio buttons, my updated version uses a simple select menu. When the user selects a theme, it writes the stylesheet link to the document head and sets a cookie. You can add as many different themes to the menu as you want. It’s easy to set up, validates, uses PHP 5, and works on all modern browsers.

The demo uses two stylesheets: a default one, and a high-contrast one. You could very easily extend it and create a number of themes; not just for accessibility purposes, but to show off your fancy CSS skills as well.

You can view the demo here

You can download the code here (zip file)

The switcher is also available pre-installed on my WordPress "Access" Theme which is available here

Special thanks to Rob Ballou and Chris Clark for all their help on this script.