Подход, упомянутый zaf, потребует перезагрузки страницы, когда вы хотите переключить таблицы стилей. Что я считаю лучшим подходом, так это добавление имени класса в тело.
если у вас есть возможность использовать javascript
<body class="theme-1">
<div class="main"><div>
</body>
Тогда каждая из ваших таблиц стилей должна содержать название темы в объявлениях:
- theme1.css
.theme-1 div.main {
background-color: #eee
}
- theme2.css
.theme-2 div.main {
background-color: #f30
}
Чтобы переключать таблицы стилей, вы просто удаляете старое название темы и добавляете тему, которую хотите использовать.
Тогда вы даже можете динамически добавлять таблицы стилей, если вы предоставляете пользователю интерфейс для настройки внешнего вида вашей страницы.
Новый улучшенный ответ:
Я только что нашел хорошее решение, реализованное людьми из extjs. Он включает в себя загрузку всех таблиц стилей, которые вы хотите, используя теги . Хитрость заключается в том, что вы можете установить отключенное свойство в элементе ссылки, чтобы оно не применялось.
Например, используйте firebug и посмотрите на
http://www.extjs.com/deploy/dev/examples/themes/index.html
Найдите файл styleswitcher.js и посмотрите на функцию setActiveStyleSheet
function setActiveStyleSheet(title) {
var i,
a,
links = document.getElementsByTagName("link"),
len = links.length;
for (i = 0; i < len; i++) {
a = links[i];
if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if (a.getAttribute("title") == title) a.disabled = false;
}
}
}