- Совместимость с XenForo
- 2.3.x
Как настроить тёмную тему в XenForo 2.3+ — эстетичный CSS-гайд для веб-дизайна
Вы устали от яркого белого фона в XenForo?
Вы цените чистый, минималистичный дизайн и предпочитаете тёмную тему — как это делают профессионалы в веб-дизайне?
В этой статье вы узнаете, как вручную настроить глубокую, эстетичную тёмную тему в XenForo 2.3+, используя только CSS-код — без сторонних расширений, без замедления сайта, без лишнего шума.
✅ Почему тёмная тема — это не просто мода
Тёмная тема не просто "выглядит круто". Она:- Снижает нагрузку на глаза при длительном использовании
- Экономит заряд батареи на OLED-экранах
- Создаёт атмосферу "профессионального" и "сдержанного" пространства — идеально для форумов, технических сообществ и сайтов с долгим чтением
🛠 Шаг 1: Доступ к пользовательскому CSS
- Войдите в Админ-панель XenForo → Стили → Стили и шаблоны
- Выберите ваш активный стиль (обычно — Default Style)
- Перейдите в раздел: Стили → Пользовательский CSS
- Очистите поле (если там есть старый код) — мы начнём с чистого листа.
🎨 Шаг 2: Основной CSS-код для тёмной темы
Скопируйте и вставьте следующий код в поле Пользовательский CSS:
CSS:
/* === ОСНОВНАЯ ТЁМНАЯ ТЕМА ДЛЯ XENFORO 2.3+ === */
:root {
--bg-primary: #121212;
--bg-secondary: #1e1e1e;
--bg-tertiary: #252525;
--text-primary: #e0e0e0;
--text-secondary: #b0b0b0;
--accent: #6c5ce7;
--border: #333;
--shadow: rgba(0, 0, 0, 0.5);
}
body {
background-color: var(--bg-primary) !important;
color: var(--text-primary) !important;
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
}
/* Заголовки */
h1, h2, h3, h4, h5, h6 {
color: var(--text-primary);
font-weight: 600;
}
/* Фон блоков, карточек, меню */
.block, .block-container, .sidebar, .message, .panel, .menu, .tabs, .button {
background-color: var(--bg-secondary) !important;
border-color: var(--border) !important;
color: var(--text-primary) !important;
}
/* Кнопки */
.button {
border-color: var(--accent) !important;
background-color: transparent !important;
color: var(--accent) !important;
}
.button:hover {
background-color: var(--accent) !important;
color: var(--bg-primary) !important;
box-shadow: 0 0 10px rgba(108, 92, 231, 0.3);
}
/* Ссылки */
a {
color: var(--accent) !important;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Сообщения пользователей */
.message-body {
background-color: var(--bg-tertiary) !important;
border-left: 4px solid var(--accent);
margin-bottom: 1rem;
}
/* Панель навигации */
.navTabs .navLink {
color: var(--text-primary) !important;
}
.navTabs .navLink:hover {
background-color: var(--bg-tertiary) !important;
}
/* Футер */
.footer {
background-color: var(--bg-secondary) !important;
border-top: 1px solid var(--border);
}
/* Ползунки и элементы формы */
input, textarea, select {
background-color: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border) !important;
}
/* Тени (деликатные, не агрессивные) */
.boxShadow {
box-shadow: 0 4px 12px var(--shadow) !important;
}
/* Убираем лишнее */
.xf-notice, .xf-alert {
background-color: var(--bg-tertiary) !important;
border-color: var(--accent) !important;
color: var(--text-primary) !important;
}✨ Шаг 3: Дополнительные улучшения (опционально)
➤ Добавьте плавный переход цветов (для плавности анимаций):
CSS:
* {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}<pre>):
CSS:
pre, code {
background-color: #1a1a1a !important;
color: #a5d6ff !important;
border-left: 3px solid #6c5ce7 !important;
padding: 1rem;
border-radius: 4px;
font-family: 'Fira Code', 'Courier New', monospace;
font-size: 0.95em;
}🧪 Проверка и тестирование
- Сохраните CSS.
- Откройте свой форум в инкогнито-режиме — чтобы увидеть, как его увидят посетители.
- Проверьте:
- Читаемость текста
- Контраст между фоном и текстом (должен быть ≥ 4.5:1)
- Не исчезли ли кнопки или ссылки
💬 Почему это работает лучше, чем плагины?
- Нет лишнего JavaScript — сайт быстрее
- Нет конфликтов с обновлениями
- Вы полностью контролируете стиль — можно легко адаптировать под вашу аудиторию
- Выглядит профессионально — как у крупных технических сообществ (например, Hacker News, Dev.to)
🔮 Что дальше?
- Создайте две версии CSS — тёмную и светлую — и добавьте переключатель через JavaScript (если захотите позже)
- Свяжите тёмную тему с предпочтениями пользователя — например, запоминайте выбор через localStorage
- Поделитесь этим гайдом в Telegram-канале — вы же используете его, верно? 😉
📌 Заключение
Настройка тёмной темы в XenForo 2.3+ — это не про "сделать чёрный фон". Это про создание эстетичного, удобного и профессионального пространства.С этим CSS-кодом вы получите:
- Чистый дизайн
- Высокую читаемость
- Быструю загрузку
- Полный контроль
Мануал XenForo
Создаем стильное оформление "Номера версии".
Мануал XenForo
Баннеры пользователей изображением
![[Ap Yazilim] Mini Announcement Blocks](/data/resource_icons/0/548.jpg?1743017961){kind=icon}
