UsefulJS.Skin

The Skin extension provides an easy API for switching between alternate stylesheets to change your web application's look and feel.

Alternate stylesheets

Switchable stylesheets are indicated by a title attribute on the link element. The rel attribute may also be specified as "alternate stylesheet" to flag it as an alternative:

<link rel="stylesheet" href="primary.css" title="Primary">
<link rel="alternate stylesheet" href="secondary.css" title="Secondary">

Some browsers (for example, Firefox and Opera) allow switching between alternative stylesheets by diving into the View menu while others (such as Chrome without a dedicated extension) do not. It is also possible to switch between them programmatically (which is what this extension facilitates).

It is also possible to add a title attribute to inline <style> elements and switch between them. However, this does not seem to work on all browsers unlike external stylesheets which do. If you have simple requirements and don't want to litter your source tree with external stylesheets, you can achieve the desired result with a data URI: 
<link rel="stylesheet" href="data:text/css,BODY%20{%20background-color:%20white;%20color:%20black;%20}" title="W+B">
<link rel="alternate stylesheet" href="data:text/css,BODY%20{%20background-color:%20black;%20color:%20white;%20}" title="B+W">

Static methods

load

Identifies the switchable <link> / <style> elements in the document head and returns their names.

Syntax
load([active])
Parameters

Returns Array: the switchable stylesheets.

Description

The active parameter may be used to override the default stylesheet. You might do this if, for example, you saved the user's preference in a previous session. The strings in the return Array may be passed to UsefulJS.Skin.choose.

You must call load before calling choose. This is because choose only accepts values that the library knows about. If you add a <link> element programmatically, you must call load again before you can activate it.
load only searches document.head for stylesheets. Since this is where they belong anyway, I don't plan on searching document.body.
Usage
var skin = null, _fixed = UsefulJS.fix();
if (UsefulJS.featureSupport.storage.local || _fixed._storage.localStorage) {
    skin = localStorage.getItem("preferredStyle");
}
var skins = UsefulJS.Skin.load(skin);

choose

Switches to a different stylesheet.

Syntax
choose(active)
Parameters
Description

Does nothing if active is the currently active stylesheet or if active is not the name of a known stylesheet.

Usage
// Build up a menu of selectable stylesheets
var menu = ..., styleSheets = UsefulJS.Skin.load();
styleSheets.forEach(function(sheetName) {
    var menuItem = document.createElement(...);
    menuItem.appendChild(document.createTextNode(sheetName));
    UsefulJS.Event.register(menuItem, "click", function() {
        UsefulJS.Skin.choose(sheetName);
    });
    menu.appendChild(menuItem);
});

active

Gets the currently active stylesheet.

Syntax
UsefulJS.Skin.active()

Returns String: the name of the currently active stylesheet.

Usage
// Add a new stylesheet but do not change the selection
var newSheet = document.createElement("link");
newSheet.rel = "alternate stylesheet";
newSheet.href = "tertiary.css";
newSheet.title = "Tertiary";
document.head.appendChild(newSheet);
var allSheets = UsefulJS.Skin.load(UsefulJS.Skin.active());