Альтернативные таблицы стилей тут были бы очень кстати. Вот только поддержка хромает. С хромом совсем печально. Вот версия, рабочая как минимум в последних версиях IE, Firefox, Chrome:
<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="stylesheet" title="Default" href="data:text/css,body%7Bbackground%3Ared%7D" />
<link rel="alternate stylesheet" title="Alternate" href="data:text/css,body%7Bbackground%3Ablue%7D" />
<script>
function selectStyle(style) {
var sheets = document.styleSheets;
for (var i = 0; i < sheets.length; i++) {
var sheet = sheets[i];
var disabled = sheet.title !== style;
sheet.ownerNode.disabled = !disabled; // webkit workaround
sheet.ownerNode.disabled = sheet.disabled = disabled;
}
}
</script>
Test
<button onclick="selectStyle(textContent)">Default</button>
<button onclick="selectStyle(textContent)">Alternate</button>
Причем Firefox и IE предоставляют выбор темы прямо в меню браузера (появляется по Alt'у). Кроме того, IE восстанавливает последнюю выбранную тему после перезагрузки страницы.
В общем, считаю что это отлично подходит, вот только нужно протестировать в разных браузерах.
Вообще, вместо плясок с disabled мы должны использовать document.selectedStyleSheetSet = 'Имя темы'. Но это поддерживается только в Firefox. В хроме свойство есть, но оно не реагирует на запись.
