Как установить: в админ. панели меню "Формы", далее в любую панель HTML, я рекомендую в самый низ окна HTML низ, там оно мешать ничему не будет.
Код:<!-- Тёмная тема --> <style>#html-header{position:relative}.StyleSwitch{height:20px;width:20px;position:absolute;z-index:1000;right:5px;top:50px;border-radius:50%;cursor:pointer;box-shadow:0 0 10px rgba(0,0,0,.7);transition:.1s ease}.StyleSwitch:hover{opacity:.8}.StyleSwitch.St{background:#426B9A url(https://forumstatic.ru/files/0016/a6/f8/90261.png) center center no-repeat!important;background-size:16px!important}.StyleSwitch.My{background:#6996CA url(https://forumstatic.ru/files/0016/a6/f8/22564.png) center center no-repeat!important;background-size:16px!important}body.dark-theme .post .post-body::before{border-color:transparent #4a5b70 transparent transparent !important}body.dark-theme .post .post-body::after{border-color:transparent #2d3748 transparent transparent !important}body.dark-theme .postVoters strong{background:#c0c0c0;padding:2px 4px;border-radius:4px;color:#000}body.dark-theme .punbb .post-content p a{background:rgba(255,255,255,0.1);border-radius:3px;padding:2px}body.dark-theme .punbb .post-content p a:hover{color:teal}</style><script>(function(){var style='https://forumstatic.ru/files/001a/f0/7d/20423.css?v=2';style='<link rel="stylesheet" id="StyleAdd" type="text/css" href="'+style+'"/>';function setStyle(){$('link[rel="stylesheet"]:last').after(style);$('.StyleSwitch').removeClass('St').addClass('My');$('.StyleSwitch').attr('title','Стандартный стиль');$('body').addClass('dark-theme')}$('#html-header').prepend('<span class="StyleSwitch St" title="Затемненный стиль"></span>');$('.StyleSwitch').tipsy({fade:true,gravity:'nw'});if($getCookie('StyleSwitch')){setStyle();}$('.StyleSwitch.St').live('click',function(){$setCookie('StyleSwitch','My',30*3600*24*30*1000);setStyle();});$('.StyleSwitch.My').live('click',function(){$('link#StyleAdd').remove();$deleteCookie('StyleSwitch');$('.StyleSwitch').addClass('St').removeClass('My');$('.StyleSwitch').attr('title','Затемненный стиль');$('body').removeClass('dark-theme');});})();</script> <!-- Конец тёмной темы -->
Это код в в "минифицированном" виде, чтобы занимал меньше места при загрузке. Полная версия с комментариями выглядит так:
Код:<!-- Тёмная тема и вспомогательные стили --> <style> /* ===== Переключатель темы ===== */ #html-header { position: relative; /* Чтобы кнопка StyleSwitch позиционировалась относительно header */ } .StyleSwitch { height: 20px; width: 20px; position: absolute; z-index: 1000; right: 5px; /* Отступ справа */ top: 50px; /* Отступ сверху */ border-radius: 50%; /* Круглая кнопка */ cursor: pointer; box-shadow: 0 0 10px rgba(0,0,0,.7); /* Тень для объёма */ transition: .1s ease; /* Плавная анимация при наведении */ } .StyleSwitch:hover { opacity: .8; } /* Лёгкое затемнение при наведении */ .StyleSwitch.St { background: #426B9A url(https://forumstatic.ru/files/0016/a6/f8/22564.png) center center no-repeat!important; background-size: 16px!important; /* Иконка стандартного стиля */ } .StyleSwitch.My { background: #6996CA url(https://forumstatic.ru/files/0016/a6/f8/90261.png) center center no-repeat!important; background-size: 16px!important; /* Иконка тёмного стиля */ } /* ===== Треугольники (только для тёмной темы) ===== */ body.dark-theme .post .post-body::before { border-color: transparent #4a5b70 transparent transparent !important; /* тёмный фон треугольника */ } body.dark-theme .post .post-body::after { border-color: transparent #2d3748 transparent transparent !important; /* тёмная окантовка */ } /* ===== "Сказали спасибо" (только для тёмной темы) ===== */ body.dark-theme .postVoters strong { background: #c0c0c0; /* серебристый фон */ padding: 2px 4px; border-radius: 4px; color: #000; /* чёрный текст */ } /* ===== Подсветка ссылок в постах (только для тёмной темы) ===== */ body.dark-theme .punbb .post-content p a { background: rgba(255,255,255,0.1); /* мягкий светлый фон */ border-radius: 3px; padding: 2px; } body.dark-theme .punbb .post-content p a:hover { color: teal; } /* цвет текста при наведении */ </style> <script type="text/javascript"> (function () { var style = 'https://forumstatic.ru/files/001a/f0/7d/73291.css?v=45'; // Ссылка на внешний CSS для тёмной темы style = '<link rel="stylesheet" id="StyleAdd" type="text/css" href="'+style+'"/>'; /* ===== Функция включения тёмного стиля ===== */ function setStyle () { $('link[rel="stylesheet"]:last').after(style); // Подключаем внешний CSS $('.StyleSwitch').removeClass('St').addClass('My'); // Меняем иконку кнопки $('.StyleSwitch').attr('title','Стандартный стиль'); // Подпись кнопки $('body').addClass('dark-theme'); // Добавляем класс тёмной темы } /* ===== Добавляем кнопку в HTML ===== */ $('#html-header').prepend('<span class="StyleSwitch St" title="Затемненный стиль"></span>'); $('.StyleSwitch').tipsy({fade: true, gravity: 'nw'}); // Подсказка при наведении if($getCookie('StyleSwitch')) { setStyle (); } // Если включена тёмная тема, применяем сразу /* ===== Событие клика по кнопке для включения ===== */ $('.StyleSwitch.St').live('click', function () { $setCookie('StyleSwitch','My',30*3600*24*30*1000); // Сохраняем cookie на 30 дней setStyle (); }); /* ===== Событие клика по кнопке для выключения ===== */ $('.StyleSwitch.My').live('click', function () { $('link#StyleAdd').remove(); // Убираем подключённый CSS $deleteCookie('StyleSwitch'); // Удаляем cookie $('.StyleSwitch').addClass('St').removeClass('My'); // Меняем иконку на стандартную $('.StyleSwitch').attr('title','Затемненный стиль'); $('body').removeClass('dark-theme'); // Убираем класс тёмной темы }); })(); </script> <!-- Конец тёмной темы -->
Тёмная тема включается кнопкой, которая в десктопном разрешении экрана находится справа вверху (значок синей лампочки). В мобильном виде эта кнопка скрыта.
Достоинства: Это тёмная тема 🖤 которая реально выглядит неплохо (как в стандартном виде, так и со всеми улучшениями кода, что я добавил на форум)
Код выложен в исходном виде, поэтому вы можете сами его легко модифицировать
Недостатки: код подключает к себе внешний стиль по адресу https://forumstatic.ru/files/001a/f0/7d/73291.css
Это стиль от господина Reysler , насколько я понимаю, для сервиса RusFF и там много "лишнего для платформы MyBB.ru. Я не знаю, что именно оттуда можно удалить как ненужное и без последствий.
В минифицированном виде он просто сжат в файл https://forumstatic.ru/files/001a/f0/7d/20423.css и именно его "тянет" минифицированный скрипт.