Переключатель "сменить цвет шаблона" на DLE пользователем

Как для пользователя сделать красивую кнопку смены шаблона на лету на сайте? Как сменить "дневной" шаблон на "ночной", светлый на темный? Предлагаю вам простой вариант на ajax с помощью стандартной функции skin change на DLE. Как многие знают, сменить шаблон можно по ссылке

ВАШСАЙТ/index.php?action_skin_change=yes&skin_name=ИМЯШАБЛОНА

Эту функцию мы и используем, причем делать мы будем лишь в шаблоне, движок не затронем, а пользователь останется на той же странице. Результат будет такой, справа кнопка:


Код в ваш tpl

<ul class="change-color" onclick="skinChange('dark-theme');" title="Сменить цвет дизайна">
<li class="is-active"><span class="fal fa-sun"></span></li>
<li><span class="fal fa-moon"></span></li>
</ul>

Где dark-theme название шаблона на который меняем, а класс is-active выделяет активный пункт. То есть, если код выше для светлого шаблона, то для темного dark-theme соответственно будет

<ul class="change-color" onclick="skinChange('light-theme');" title="Сменить цвет дизайна">
<li><span class="fal fa-sun"></span></li>
<li class="is-active"><span class="fal fa-moon"></span></li>
</ul>

В ваш css файл

.change-color, .change-color * {box-sizing: border-box;}
.change-color {display: inline-flex; justify-content: space-between; align-items: center; cursor: pointer;
	background-color: #444; height: 40px; border-radius: 20px; padding: 5px 0; margin-left: 20px;}
.change-color li {cursor: pointer; width: 30px; height: 30px; line-height: 30px; 
	border-radius: 50%; text-align: center; color: #ccc; margin: 0 5px;} 
.change-color li.is-active {background-color:#fff; color: #444;}

В ваш js файл

function skinChange(a) {
	$.ajax({
	type: "POST",
 	url: "/index.php",
	data: {'action_skin_change': 'yes', 'skin_name': a},
	beforeSend: function() { ShowLoading(''); },
	success: function() { window.location = window.location.href.split("#")[0]; }
  }); 
};

Вот и все.

Иногда по неизвестным мне причинам на сайте не срабатывает ajax запрос. При клике страница просто перезагружается, а шаблон не меняется. В таком случае замените код в вашем js файле на код ниже. Этот способ хуже тем что юзера перенаправит на главную страницу, но у меня нет других вариантов.

function skinChange(a) {
	window.location = '/index.php?action_skin_change=yes&skin_name='+a+'';
};

В настройках - посетители должно быть включено "Разрешить посетителям смену скина на сайте"
Код css подгоняйте для себя, иконки fal (популярный набор Font Awesome) меняйте на свои иконки, если требуется.
Вообще вся соль тут в onclick="skinChange('dark-theme');" и используя это вы можете сделать кнопки любого вида и хоть 10 штук.