Код тёмной темы для стиля форума

Стиль тёмной темы для предустановленного стиля форума "Mybb vBullitin mix".

Как установить: в админ. панели меню "Формы", далее в любую панель 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

В минифицированном виде он просто сжат в файл https://forumstatic.ru/files/001a/f0/7d/20423.css и именно его "тянет" минифицированный скрипт.

P.S. Ещё кое что.
После установки тёмной темы, может наблюдаться мелькание белого пустого фона браузера перед загрузкой тёмного варианта страницы, это раздражает

Это очень распространённая проблема при использовании тёмных тем на сайтах: "белая вспышка" (или "flash of unstyled content" — FOUC), которая происходит до применения CSS, особенно когда тёмная тема подключается через JavaScript после загрузки страницы.

Мы не имеем доступа к непосредственно коду страниц форума, поэтому применим обходной путь (вставим затеняющий экран после загрузки DOM и основных CSS, но строго до загрузки кода тёмной темы).

В самый верх окна HTML верх вставить код:

Показать код

Код:

<!-- Тёмная тема без вспышки -->
<style id="dark-loader-style" disabled>
  #dark-loader {
    position: fixed;
    z-index: 99999;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: #121212;
    pointer-events: none;
  }
</style>

<script>
// Вставляем затемняющий экран сразу, если активна тёмная тема
(function () {
  if (document.cookie.indexOf('StyleSwitch=My') !== -1) {
    document.getElementById('dark-loader-style').disabled = false;
    var loader = document.createElement('div');
    loader.id = 'dark-loader';
    document.body.appendChild(loader);

    window.addEventListener('load', function () {
      setTimeout(() => {
        document.getElementById('dark-loader')?.remove();
      }, 50); // Можете увеличить до 100–200, если фон всё равно мелькает
    });
  }
})();
</script>

<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>
<!-- Тёмная тема без вспышки -->

P.P.S. Можно добавить кнопку включения тёмной темы для мобильного режима просмотра (тоже в HTML низ).

Показать код

Код:

<!--🌙 Плавающий переключатель тёмной темы (фиксированно с регулировкой от верха) -->
<script>
(function(){
  var topOffset = 270; // ⬆️ Положение кнопки от верха (можно менять)
  var mobileMaxWidth = 600; // 📱 Порог ширины для мобильного

  function isMobile(){ return window.innerWidth <= mobileMaxWidth; }
  function isHome(){ return location.pathname === '/' || location.pathname.endsWith('index.php'); }

  function updateButtonTheme(btn) {
    const isDark = document.cookie.includes('StyleSwitch=My');
    btn.style.background = isDark
      ? '#6996CA url("https://forumstatic.ru/files/0016/a6/f8/22564.png") center/50% no-repeat'
      : '#426B9A url("https://forumstatic.ru/files/0016/a6/f8/90261.png") center/50% no-repeat';
    btn.title = isDark ? 'Светлая тема' : 'Тёмная тема';
  }

  function createMobileSwitch(){
    if (!isMobile() || !isHome()) return;
    if (document.getElementById('mobile-style-switch')) return;

    const btn = document.createElement('div');
    btn.id = 'mobile-style-switch';
    document.body.appendChild(btn);

    const style = document.createElement('style');
    style.textContent = `
      #mobile-style-switch {
        position: fixed;
        top: ${topOffset}px;
        right: 15px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #426B9A url('https://forumstatic.ru/files/0016/a6/f8/90261.png') center/50% no-repeat;
        box-shadow: 0 0 8px rgba(0,0,0,0.6);
        z-index: 10000;
        cursor: pointer;
        transition: transform 0.2s ease;
      }
      #mobile-style-switch:active {
        transform: scale(0.9);
      }
    `;
    document.head.appendChild(style);

    updateButtonTheme(btn); // выставляем начальное состояние

    btn.addEventListener('click', function(){
      const desktopBtn = document.querySelector('.StyleSwitch');
      if (desktopBtn) {
        desktopBtn.click();
        setTimeout(() => updateButtonTheme(btn), 100); // ⚡ небольшая задержка, чтобы тема успела примениться
      }
    });
  }

  function waitForBody(){
    if (document.body){
      createMobileSwitch();
    } else {
      setTimeout(waitForBody, 50);
    }
  }
  waitForBody();

  window.addEventListener('resize', createMobileSwitch);
})();
</script>
<!--🌙 Плавающий переключатель тёмной темы (фиксированно с регулировкой от верха) -->

После установки всех кодов, сохраните их в админ панели , потом зайдите на свой форум и перезагрузите его через Ctrl+F5.
Если это не поможет, очистите кэш в вашем браузере за последний час.

Подпись автора: Функционал форума Книга жалоб Книга предложений Знак зодиака Как вставить видео на форум Форум"Грибные места" Слайдер для картинок Live-box с темами

kuban-forum.ru - Лучший форум для общения

Меню навигации

Пользовательские ссылки

Информация о пользователе

Код тёмной темы для стиля форума

Сообщений 1 страница 2 из 2

Поделиться126.09.2025 21:36:52

Поделиться226.09.2025 22:51:44

Похожие темы