Как сделать сменные темы с помощью CSS и JavaScript

Я новичок в CSS и JavaScript, и мне было интересно, можете ли вы создать script, который позволит вам изменить, какую таблицу стилей использует сайт.

Скажите: у вас была зеленая тема, где все оттенки зеленого. Что бы вы сделали, чтобы пользователь мог изменить его на красный с помощью нажатия кнопки?

Кто-нибудь знает, как это сделать?

Ответы

Ответ 1

Вы можете установить Id в тег ссылки и переключить css во время выполнения.

HTML

<link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" />

JS

document.getElementById('buttonID').onclick = function () { 
    document.getElementById('theme_css').href = '../red.css';
};

Ответ 2

Да, вы можете изменить CSS с помощью Javascript. См. этот учебник для получения дополнительной информации. Он в основном связывает несколько таблиц стилей, подобных этому:

<link rel="stylesheet" type="text/css" title="blue"
   href="#" onclick="location.href='http://example.com/css/blue.css'; return false;">
<link rel="alternate stylesheet" type="text/css" title="pink"
   href="#" onclick="location.href='http://example.com/css/pink.css'; return false;">

И затем использует Javascript для его изменения:

<form>
<input type="submit" onclick="switch_style('blue');return false;" name="theme" value="Blue Theme" id="blue">
<input type="submit" onclick="switch_style('pink');return false;" name="theme" value="Pink Theme" id="pink">
</form>

Функция switch_style() написана в этом учебнике.