Условия использования:
Вы можете использовать все материалы, соблюдая условия использования бесплатного контента.

Описание
Скрипт служит для установки нескольких стилей в форму "Свой стиль" без необходимости подгрузки и замены стилевых файлов.
Устанавливает класс для элемента body. Предполагает наличие общей разметки у всех установленных стилей, смену стилевых настроек отдельных элементов (как правило, это цвета фона, шрифта и рамок, картинки бэкграунда) в зависимости от выбранного пользователем стиля.
По умолчанию кнопки устанавливаются в начало body, однако по желанию их можно разместить и в других блоках. Например, в #html-header (html-верх) или сделать их выпадающим списком главного меню.

Код скрипта устанавливается в блок "HTML верх" (в разделе "Формы"):

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Список доступных стилей и соответствующих им классов хранится в переменной styleList, заполняется по образцу, приведённому в начале скрипта. Вы можете оставить название стиля пустым, если не хотите отображения надписей и предпочитаете оформление кнопок стилем. Также вместо текстовой надписи вы можете использовать любые html-теги, например, сразу добавить кнопку-картинку:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Примерный стиль для расположения кнопок в левом верхнем углу форума (может быть размещён в своём стиле или в блоке <style>...</style> перед скриптом):

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Пример стилизации кнопок через css:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Для того, чтобы кнопки добавились не в тело форума, а в блок #html-header, разместите в форме html-верх следующий код:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

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

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

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

Switch-переключатель. Демо:

Скрипт:

Код:

<!-- Смена стиля, (с) ForumD.ru, satsana, модификация от Fumuse -->
<script type="text/javascript">
const styleList = [{
	class: 'day',
	name: 'День'
},
{
	class: 'night',
	name: 'Ночь'
}];

function getCookie(a) {
	return (a = document.cookie.match(new RegExp("(?:^|; )" + a.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)"))) ? decodeURIComponent(a[1]) : void 0
}

function setStyle(a) {
	$("body").attr("class", a);
	selStyle = a;
	document.cookie = "selStyle=" + a + "; max-age=2592000";
}

let selStyle = getCookie("selStyle");
selStyle && setStyle(selStyle);

function darkLight () {
	if (styleList[1]["class"] === selStyle) {
    $('#checkBox').prop("checked", false);
    setStyle(styleList[0]["class"]);
	} else {
    $('#checkBox').prop("checked", true);
    setStyle(styleList[1]["class"]);
	}
}

$(document).pun_mainReady(function () {
	if ($("#stylelist").length || $("body").prepend('<ul id="stylelist"></ul>')) {
    $("#stylelist").append('<label class="switch">\n' +
    '<input type="checkbox" onclick="darkLight();" id="checkBox" ' +
    (styleList[1]["class"] === selStyle ? 'checked' : false) + '>\n' +
    '<span class="slider"></span>\n' +
    '</label>');
	}
});
</script> <!-- Смена стиля - END -->

---

Стиль (с codeopen):

Код:

/*TOGGLE COLORS*/
.dark {
  background: #545454;
  color: #efefef;
}
p {
  background: none !important;
}
/*SWITCH*/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  align-self: center;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider {
  border-radius: 30px;
}

.slider:before {
  border-radius: 50%;
}

Если вы пытаетесь установить блок с кнопками смены стиля в подвале или хотите использовать скрипт на другой платформе, и кнопки не появляются - найдите в коде скрипта pun_mainReady и замените на ready.

Стиль, используемый по умолчанию, пишется как обычно, без указания стилевого класса, и размещается в полях "своего стиля". Для изменения стилевых настроек отдельных элементов нужно добавить эти настройки в стиль ниже основных с добавлением в начало селектора стилевого класса.
Допустим, вы собираетесь использовать два стиля: Светлый с классом light и Тёмный с классом dark. По умолчанию выбрали светлый стиль. Все его настройки прописываются как обычно, без указания класса light. По умолчанию вы прописываете фон и цвет шрифта для какого-то элемента так, как он должен выглядеть в светлом стиле. Для примера возьмём блок объявления:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Для того, чтобы эти параметры изменились в тёмном стиле, дописываем чуть ниже, добавив в начало селектора класс .dark:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Если стилей больше двух - дальше по тому же принципу дописываем настройки для остальных. И так для всех элементов, отображение которых будет меняться в разных стилях. Если в отдельном стиле какой-то элемент не меняется - ничего не прописывайте, будут использованы настройки по умолчанию.
Исключение составляет элемент body, для него стилевой селектор будет выглядеть так: body.dark {}. А также элемент html - изменить его настройки с помощью этого скрипта не получится, поэтому воздержитесь от прописывания в нём фонов и цвета шрифта.

Очевидный момент на который будет не лишним указать: если у вас в коде есть перечисление нескольких селекторов через запятую (например .punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span {}), то стилевой селектор надо ставить в начале строки и после КАЖДОЙ запятой (например .dark .punbb .formsubmit input, .dark .punbb .formsubmit a, .dark .punbb .formsubmit span {})

Желаю всем хорошего настроения и прекрасных дизайнов!