Articles, Tips

ThemeSwitcher in Web Design, Fantstic Examples and Tutorials

June 7, 2010 • By

Have you ever visited a site that sells themes and allows you to easily switch between them within a fraction of a second? Most of have, and we can agree that this makes switching between these much quicker and easier. The cool thing about ThemeSwitchers is that any website with a similar function (i.e. switching between color swatches from an online color app) can utilize them through the power of jQuery.

Below you will experience a beautiful showcase of websites that use ThemeSwitchers and we also provide you with great tutorials and screen casts on how to develop your own and fully integrate it with your website.

Examples of Great ThemeSwitchers


The HutchHouse theme switcher is located at the top right hand side of your screen. It allows you to switch between themes such titled space, jungle, night (default), and depth. The themes have their own identity, illustrations and colors.


Sites such as WooThemes are infamous for knowing how to encourage the user to switch between themes and choose various options from a list. Here the switcher is located at the top of the page and it lets you choose different themes and styles. You can also elect to purchase the theme all in one spot.

Stephan Velthuys has a simple color switcher at the top right hand corner. As you scroll over the color you wish to view the site in, the small tabs subtly pop-out.

Marius Roosendaal

Marius’s website is one of the first websites I had ever come across a few years ago that allowed you to change between themes. This website has the switcher at the top of the sidebar and lets you switch from a morning, to a night, and later a sunrise theme. It’s pretty fascinating.

Komodo Media

This website uses a revolutionary function for switching/altering the way your website looks without having to reload the web page. There is a “foliage-o-meter” located on the right sidebar and if you click, hold, and drag the pin to the left Komodo Media’s theme becomes much simpler and it reduces the illustrative “clutter”. If you drag the pin to the right it will increase the amount of illustration that can be viewed throughout the sites theme.


Anidea’s theme switcher allows the user to quickly choose between actual photographic and illustrative themes that replace the current one at an instant. From what we counted there are 8 available themes.

Stationery Style

This theme switcher lets the user switch the current websites color from black, dark grey, to an even lighter grey. Switching between colors on this site is a great way to enhance the usability.

Pure Structure

Pure Structure gives you a dynamic style switcher where the presentation of the websites portfolio can be adapted, and the background image can be changed as well. There two reasons to use this switcher, to change the structure of the website, and to replace certain visual elements.


Schillmania has an advanced mood switcher: visitors can adjust the brightness of the displayed header image and add a snow effect

Carreras con Futuro

Carreras con Futuro allows the user to change the hand-drawn background image. The style switcher changes the color of the background, and also changes the color of specified elements within the sites layout.

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.


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.

Small Stone

Smallstone allows its visitors to “swap out the shelf” — exchange the header, visuals and links. The style switcher is placed right under the header and is also designed in a unique and professional way.

Best Web Gallery

Nick La’s popular gallery site Best Web Gallery offers three different options for displaying the layout.


Kulturbanause has a quite unusual blog design with two artistic themes — Daylight and Sunset. The style switcher is placed in the sidebar. When the theme is switched both graphics and visuals are changed.

Joshua Piersanti

Joshua Piersanti’s portfolio site includes a style switcher that flips between a day and a night theme. When the background image changes, as does the color of the text to contrast the changing background.


Nofrks has a day and a night style. In both cases only background image is replaced.


Planetopija enables users to change the color of the header illustration. The style switcher itself is nicely designed.

Diego Valobra

Diego Valobra has two different antique designs. The background image is replaced. The style switcher is placed in the right bar of the layout.

Fantastic Tutorials

Stylesheet Switcher Using jQuery

It is slightly more fully featured than the original version (which was written back in 2006!) as it includes the option to toggle stylesheets (which will loop between the available stylesheets one after the other). It is also more reusable as you can now trigger the stylesheet switching from your own code.

How To Create An Amazing jQuery Style Switcher

n this tutorial you will be shown how to create a style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.

A Simple jQuery Stylesheet Switcher

This is a really simple jQuery theme switcher that offers great usability and a stylish way to allow your users to switch between themes or colors.

Create a better jQuery stylesheet switcher

This is a quick and easy work-around to create a better jQuery stylesheet switcher. In this tutorial you’ll be able to change the colors of a website.

jQuery CSS stylesheet switcher

This tutorial shows you how to create a CSS style sheet switcher using jQuery for your site. This style sheet switcher has conventient forward and back links for you to cycle through available sheets and incorporates the cookie plugin so that user preferences can be retained for later visits.

CSS Style Switcher – Design Shack

This is a quick tutorial from Design Shack that provides code for a style switcher.

Quick Tip: How to Create a Theme-Switcher in 200 Seconds E

Have you ever seen sites that offer some kind of “color-switcher” within the header section? Want to know how easy it is to replicate? Here you’ll see how you can create a style-switcher in 200 seconds, using jQuery.

Style Sheet Switcher from Dynamic Drive

This is a “plug & play” style sheet switcher that lets your visitors switch between a list of alternative style sheets to apply to your site. With a change of style sheet the entire look of your site can be transformed. Persistent cookies are used to store the user’s selection and automatically recall that style sheet upon his return.

Easy Display Switch with CSS and jQuery

A tutorial by Soh Tanaka on that shows how you can achieve a similar effect as Best Web Gallery to give visitors layout options.

Change CSS styles with PHP and jQuery

Here is a tutorial on how to dynamically change stylesheets of a web page, without reloading the page using AJAX and jQuery. Use Google translator service to translate this page from spanish to your preffered language. Download link for the code used in this tutorial is also available. (Here’s the English Version)

(Visited 457 times, 1 visits today)