Style Switchers Showcase and Resources

Style switchers can be used to give visitors more options according to their preferences, or they can be used simply to add something dynamic and interesting to the site. The potential uses are nearly limitless but some common approaches include using style switchers to give choices in terms of background images, color schemes, font sizes, and layout.

In this post we’ll look at a number of sites that are using style switchers and you’ll see screenshots to demonstrate how the site will appear with various options selected. At the end of the post there is also a resources section with tutorials and scripts that can help if you are interested in using a style switcher on your site.

Carreras con Futuro

Carreras con Futuro uses a hand-drawn background image with splatter effects. The style switcher changes the color of the splatters, and also changes the color of a few elements in the site’s content area, such as the background of “login.”

Carreras con Futuro

Carreras con Futuro

Carreras con Futuro

Joshua Piersanti

Joshua Piersanti’s portfolio site includes a style switcher that flips between a day and a night theme. Obviously the background image changes, as does the color of the text to contrast the changing background. At the right edge of the screen is a light switch that is used to change the style – up for day and down for night.

Joshua Piersanti

Joshua Piersanti

Absolute Bica

The Absolute Bica portfolio site uses a large, nature-inspired background image. The style switcher allows visitors to chose a time of day: sunrise, afternoon, sunset, or night.

Absolut Bica

Absolut Bica

Absolut Bica

Absolut Bica

ANidea

The style switcher on ANidea allows visitors to choose from ten different background images (four are shown below). The various background images are large and most use vibrant colors.

ANidea

ANidea

ANidea

ANidea

Webstaze

The Webstaze portfolio site offers visitors the option of choosing a season-based theme. All four seasons are represented by a background image (all are shown below).

Webstaze

Webstaze

Webstaze

Webstaze

Jason Bradbury

Jason Bradbury’s blog allows visitors to choose the color scheme of the blog through the “choose a color” option at the top of the sidebar. Below you will see screenshots of the red and blue schemes. The background image is not changed based on this selection but it does change randomly (when you are on the site refresh the page). There are several different backgrounds that will appear randomly (a green textured background is also shown below) and each one offers visitors the opportunity to choose a color.

Jason Bradbury

Jason Bradbury

Jason Bradbury

Jason Bradbury

Impulse Design

Impulse Design uses a style switcher to give visitors the option of changing background images. There are to choices, both are shown below.

Impulse Design

Impulse Design

eAnka

The eAnka portfolio site uses a nature-inspire illustration as a header and background of the site. The style switcher gives visitors the choice to view the daytime or nighttime version, both shown below.

eAnka

eAnka

Marius Roosendaal

Marius Roosendaal’s site offers three different themes to choose from: day, night and sunrise. Each has a textured background and the text colors change appropriately as well (all three are shown below).

Marius Roosendaal

Marius Roosendaal

Marius Roosendaal

POPURLS

POPURLS offers visitors a lot of different customization options. For starters you can choose a light background or a dark background (both shown below). There are also options for how you would like the content to be displayed. The third image below is from the “river” option.

POPURLS

POPURLS

POPURLS

Best Web Gallery

Nick La’s popular gallery site Best Web Gallery offers three different options for displaying the layout. You can choose thumbnails, full, or details (all are shown below).

Best Web Gallery

Best Web Gallery

Best Web Gallery

Hutch House

The Hutch House portfolio site gives visitors the option to select one of four different themes: jungle, space, night, and depth (all shown below).  Hutch House uses a different approach than most of the sites on this list, part of the content also changes based on the theme.

Hutch House

Hutch House

Hutch House

Hutch House

Style Switcher Resources for Developers:

Here are some resources that may be helpful for you in your own design and development:

Easy Display Switch with CSS and jQuery
A tutorial by Soh Tanaka on DesignM.ag that shows how you can achieve a similar effect as Best Web Gallery to give visitors layout options.

Stylesheet Switcher Using jQuery
Get the code for a jQuery style switcher from Kelvin Luck.

CSS Style Switcher – Design Shack
This is a quick tutorial from Design Shack that provides code for a style switcher.

Build Your Own PHP Style Sheet Switcher
456 Berea Street has a nice tutorial that you can use to create a style switcher.

Style Sheet Switcher from Dynamic Drive
Here is a script provided by Dynamic Drive.

CSS Style Theme Switcher
e-ss.be provides this script that you can download in use in your own work.

For more web development articles please see:

Published September 7th, 2009 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

38 Responses

Comments are now closed on this post.

  • tutorialslounge, September 8, 2009

    that’s really cool stuff and best inspiring data. thanks

  • Nardyello, September 8, 2009

    This is awesome. Never knew how this worked.

    Do you think that the JS can create a cookie so that every time the person visits the site the style selected will be default?

  • Siegfried, September 8, 2009

    Nice. For me most interesting is the script resource list at the end.

    I have experimented with that some time, but i abandoned it. I still have some alternate styles with my site, but no Javascript styleswitcher. It has a big problem. If Javascript is disabled you get a not working styleswitcher menue on the page. Not good. If you use Javascript to dynamically create this menu this works. Except in IE, where the page elements are added via Javascript, but the Javascript associated with it does not work. Since most other browsers do allow switching style using onboard browser menue, i cancelled the Javascript styleswitcher. So IE and Chrome do not get advantage of the alternate styles, others do.

    If i ever find a god way to add a styleswitcher for IE and Chrome, maybe i’ll do it. The styleswitcher must not interfere with the browsers own style switching. For IE this is no problem, IE knows conditional comments. But what with Chrome? I don’t know.

    BTW: Creating reaaly different styles as alternate styles is the best way to learn semantic markup :)

  • Paw hellegaard, September 8, 2009

    Awesome! Thanks for sharing this list… It realy rocks, just what i was looking for! Lovely!

  • Sarah Hicks, September 8, 2009

    Good post! My favorite is definitely Absolute Bica. I’ve always wanted to try a style switcher but never knew how to begin. I appreciate all the examples you’ve laid out! Thanks.

  • NightAngel, September 8, 2009

    And http://kulturbanause.de/ ?

  • Arkiel, September 8, 2009

    @Nardiello : Yes, a js cookie can memorize your favorite switch, but i don’t know how browsers consider it. http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/ is a pist.

    Damn it. I’m not on the list…

  • David Platt, September 8, 2009

    I would never do something like this if I saw that someone else had already done it, but that’s just me. -dp

  • Angela, September 8, 2009

    Great article. Very useful information with great examples. Thanks!

  • aledesign.it, September 9, 2009

    Great post, some examples are fantastic..I prefer like graphics: Jason Bradbury, Webstaze.

  • Geld Lenen, September 9, 2009

    Thanx for the great recourses and examples. Another great example is the BBC home page. The BBC lets you customize Your Homepage by selecting the “Add more to this page” button. They make it possible to customize your background, text link colors and more. Very impressive!

  • Lida, September 9, 2009

    This is awesome. Never knew how this worked.

    Do you think that the JS can create a cookie so that every time the person visits the site the style selected will be default?

  • Alex, September 9, 2009

    Nice list – we added a style switch to our site too which someone might find useful

    http://www.engageinteractive.co.uk/

    Keep up the good work anyway!

    A

  • Trent Walton, September 9, 2009

    I think my favorite (or most unique, at least) style-switcher would be: http://www.mica.edu/ (click the 4 icon photos)

  • impulsedesign, September 12, 2009

    Sweet list,truly appreciate that you featured our site too.
    THANK YOU!

  • Bryan Kohlmeier, September 13, 2009

    Hey, thanks for including me in this gallery! Nice!

    I spent a lot of time on my themes and I am very proud how smooth I got the switcher to work which changes quite a few elements on my pages.

    I will be posting about this blog tomorrow. Thanks again!

  • Cate, September 14, 2009

    Thanks for this post, nice example.

  • Alistair, September 20, 2009

    I have always been unsure on style switchers, some website have absolutely murdered, but I absolutely love the examples in this post.

  • lida, August 6, 2010

    Thanks for this post, nice example.