Who Doesn't Like Blue Anyway?

I recently modified one of my mapping sites, Geospatial Portal, to have a nice blue theme to go along with a blue jQuery UI widget theme. I made a new logo, page background image, etc. Blue. Who doesn’t like blue?

As it turns out, one of my coworkers. And a cursory comparison of our respective attire revealed that of the two of us, my sense of color coordination might be the more deficient. And I thought that since I was loading the jQuery UI theme from Google’s CDN, why not let users pick their own theme?

I immediately used my Ginja* skills to find a jQuery UI theme switcher script put out by the jQuery UI folks. I had to hack it up a tiny bit to give it a default theme, associate some page background colors with themes, and set the theme cookie correctly. But in no time flat I had a theme switcher all set to go. It sets a cookie so it can remember your theme selection the next time you visit the site.

There are lots of ways to find out how badly your CSS sucks, and I’d add putting in a theme switcher near the top of the list. I had a number of color problems, particularly with fonts. As in switch to a dark theme and watch your fonts disappear. That was generally resolved by trusting the jQuery UI CSS theme to know what it was doing - I dropped some font colors from my CSS and from the custom OpenLayers LayerSwitcher I made, and things were happy again.

The next thing I had to do was tweak the page background image. I wanted to have something swoopy up at the top, but I didn’t want to have to make a different image for each background color. I hopped into Inkscape and created a swoopy gradient with a fading transparency, so the background color shows through.

Not exactly Renoir, but it fixed the problem.

I’m still not done tweaking. I don’t like the way some of the tables look on particular themes, and now that I’ve figured out semi-transparent background images over page colors, I might need something a little cooler than the swoopy. But if you’re willing to invest a little time in cleaning up your CSS, something like this can help your users make your site feel a little bit more like their own.

*Google Ninja. Like a regular Ninja, only you throw regex rather than shuriken and invisibility is replaced with a general “meh” appearance.