A Client-Side CSS Switcher
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Clever Style-Switcher

A Client-Side CSS-Switcher


I would like to rethink CSS switchers and make a great one.



First, place clever-style-switcher.js (or the minified version, css.min.js) somewhere sensible then load it in your HTML like so:

<script src="path/to/clever-style-switcher.js"></script>
<script src="path/to/css.min.js"></script>


Clever Style-Switcher supports initialization-time configuration via an options object containing any one of the following properties:

  • namespace (Object)

OK, it's just one property for now, but I will probably add more later, so I want to be flexible. :)

To use an options object, simply pass it into the function expression as a second parameter in the call at the end of clever-style-switcher.js.

Find this:


Then change that to something like this:

})(window.document, { /* Option properties go here. */ });


By default, Clever Style-Switcher is encapsulated, but if you wish, it can expose a reference to itself to an object you specify via the namespace property of the options object.

For example, if you want a global reference to enable easy testing or tinkering from a JavaScript console, you might do something like this:

})(window.document, { namespace: window });

In that case, you would be able to access Clever Style-Switcher via window.cleverStyleSwitcher.

You may wish to consider using a custom object to hold references to any components, thereby minimizing top-level clutter. For example, you might do something like this:

})(window.document, { namespace: window.components = window.components || {} });

In that case, you would be able to access Clever Style-Switcher via window.components.cleverStyleSwitcher.

Who made this?

Clever Style-Switcher is being made by Brian Sexton of Carroket, Inc.