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.
Velthy.net 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’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.
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.
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 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.
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.
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’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 has two different antique designs. The background image is replaced. The style switcher is placed in the right bar of the layout.
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.
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.
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.
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.
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.
This is a quick tutorial from Design Shack that provides code for a style switcher.
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.
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.
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.
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)