BetterDiscord расширяет возможности стандартного клиента Discord, позволяя подключать пользовательские стили. Создание собственной темы строится на использовании CSS, что открывает доступ к изменению цветов, шрифтов, размеров элементов интерфейса и даже расположения блоков. Это решение подходит тем, кто хочет точечно адаптировать визуальную часть программы под личные задачи.
Для работы с темами используется файл формата .theme.css. Он загружается в папку themes в директории BetterDiscord. Внутри файла прописываются правила CSS, влияющие на интерфейс клиента. Например, можно заменить стандартный фон на однотонный цвет, добавить изображение или задать градиент. При необходимости допускается подключение внешних шрифтов через @import, что позволяет сделать оформление более индивидуальным.
Перед началом редактирования рекомендуется установить текстовый редактор с подсветкой синтаксиса, например Visual Studio Code. Это упрощает работу с CSS и помогает быстрее находить ошибки. После сохранения изменений тема появляется в настройках BetterDiscord и может быть активирована без перезапуска клиента. Такой подход дает возможность сразу проверить результат и внести корректировки.
Создание собственной темы в BetterDiscord требует базового понимания CSS, но позволяет получить точный контроль над внешним видом клиента. Пошаговая настройка через отдельный файл обеспечивает удобство в дальнейших изменениях и повторном использовании разработанной темы.
Установка BetterDiscord и включение загрузки пользовательских тем
Скачайте официальный установщик с сайта BetterDiscord (ищите домен betterdiscord.app) и сверяйте цифровую подпись файла при возможности. Перед установкой закройте Discord полностью – проверьте процесс discord.exe в диспетчере задач и завершите его.
Запустите установщик от имени администратора. В окне выбора действий отметьте «Install BetterDiscord» и выберите целевой профиль Discord (Stable чаще всего подходит). Если у вас несколько установок (канариум, PTB), укажите нужную версию отдельно.
После завершения установки откройте Discord и перейдите в Настройки пользователя → BetterDiscord → Themes (или Пользовательские темы). Нажмите «Open Theme Folder» – это стандартная папка для файлов с расширением .theme.css. Поместите туда файл темы и перезапустите Discord, если тема не отобразилась сразу.
В том же разделе включите переключатель рядом с названием темы, чтобы активировать её. Если переключатель не появился, убедитесь, что файл имеет расширение .theme.css и права доступа позволяют чтение для текущего пользователя.
Для безопасности используйте темы из проверенных источников: смотрите репутации авторов, проверяйте код темы на наличие удалённых запросов (fetch/xhr) и сканируйте файлы антивирусом. Перед применением создайте резервную копию пользовательских настроек Discord (папка %appdata%\BetterDiscord или эквивалент для вашей ОС).
Если после обновления Discord темы перестали работать, выполните: 1) закройте Discord; 2) снова запустите установщик BetterDiscord и выберите «Repair» или переустановку для той же версии клиента; 3) проверьте, нет ли конфликтующих плагинов. Эти шаги обычно возвращают загрузку пользовательских тем.
Создание каркаса:.theme.css, заголовок метаданных и путь к файлу
Новый файл темы должен иметь расширение .theme.css. Рекомендуется давать имя, соответствующее содержанию, например mytheme.theme.css. Этот файл сохраняется в папке %AppData%\BetterDiscord\themes\, откуда BetterDiscord автоматически подгружает все доступные темы.
В начале файла необходимо прописать блок метаданных в формате CSS-комментария. Он сообщает BetterDiscord название темы, автора, версию и описание. Без этого заголовка тема не будет отображаться в настройках.
| Название параметра | Пример значения |
| @name | MyTheme |
| @author | Username |
| @version | 1.0 |
| @description | Тёмная тема с изменённой цветовой схемой |
Каркас в начале файла выглядит следующим образом:
/**
* @name MyTheme
* @author Username
* @version 1.0
* @description Тёмная тема с изменённой цветовой схемой
*/
После этого блока можно начинать писать CSS-правила, определяющие стили для интерфейса Discord. Лучше сразу оставить структуру комментария и несколько пустых строк, чтобы файл был удобен для дальнейшего редактирования.
Организация проекта: каталоги, импорты @import и структура комментариев
Для удобства работы с темой рекомендуется разделять её на несколько файлов и хранить их в отдельной папке. Основной файл с расширением .theme.css размещается в каталоге themes BetterDiscord. Дополнительные стили можно вынести в отдельные CSS-файлы, например colors.css, layout.css, animations.css. Это упрощает внесение изменений и поиск нужного фрагмента кода.
Подключение вспомогательных файлов выполняется с помощью директивы @import. В начале основного файла темы указываются строки вида: @import url("colors.css");, @import url("layout.css");. Пути прописываются относительно расположения главного файла, поэтому при перемещении необходимо сохранять структуру каталогов.
Для навигации внутри кода стоит придерживаться строгой системы комментариев. Рекомендуется использовать разделители в формате: /* ====== Блок: Палитра ====== */, /* ====== Блок: Чаты ====== */. Для мелких пояснений удобно применять короткие комментарии после свойства: margin: 10px; /* Отступ блока сообщений */. Такая организация облегчает совместную работу и ускоряет поиск нужных участков стилей.
При увеличении объёма проекта полезно выделять отдельные папки под ресурсы – например, assets для изображений и snippets для готовых фрагментов CSS. Это делает структуру проекта логичной и облегчает дальнейшее расширение темы.
Палитра и типографика: переменные CSS в :root и подключение шрифтов
Базовые параметры темы задаются через переменные CSS в селекторе :root. Такой подход позволяет централизованно управлять цветами и типографикой без необходимости менять каждое свойство вручную.
Пример объявления переменных:
:root {
--bg-primary: #1e1e2e;
--bg-secondary: #2a2a3c;
--text-primary: #ffffff;
--text-muted: #a1a1b5;
--accent: #5865f2;
--font-main: 'Inter', sans-serif;
}Рекомендуется использовать отдельные переменные для:
- основного и вторичного фона;
- главного текста и приглушённых подписей;
- цветов акцентов, ссылок и выделений;
- базового шрифта и его запасного варианта.
Для подключения шрифтов можно использовать сервисы Google Fonts или локальные файлы. Пример импорта шрифта из Google Fonts:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');Если шрифты хранятся локально, применяется @font-face:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}После подключения шрифта его следует указать в переменной --font-main и использовать через свойство font-family для нужных элементов. Это позволит быстро менять типографику, корректируя лишь одну строку в :root.
Переопределение интерфейса: ключевые селекторы (панель серверов, список каналов, чат)
Для изменения внешнего вида панели серверов используют селектор .guildsWrapper-3Uvn0G. Он позволяет задавать фон, ширину и отступы между иконками серверов. Для индивидуальной стилизации иконок применяют .guildIcon-2JRDvt, где можно управлять закруглением, тенями и эффектами при наведении.
Список каналов представлен селекторами .containerDefault-7RImuF и .channel-2QD9_O. Первый отвечает за общую обертку, включая отступы и фон, второй – за отдельные каналы. Для выделения активного канала используется .channelItem-2f9Uy3.selected-1VxX4C, где можно изменить цвет текста и фон. Дополнительно настраиваются иконки приватных каналов через .privateChannel-1h6v5B.
Элементы чата контролируются селекторами .chatContent-3KubbW и .message-2qnXI6. .chatContent-3KubbW позволяет задавать фон, внутренние отступы и прокрутку, а .message-2qnXI6 отвечает за форматирование текста сообщений, включая цвет, шрифт и отступы между сообщениями. Для стилизации никнеймов применяют .headerText-3Uvj1Y, а для аватарок – .avatar-3jpkhQ.
При переопределении интерфейса рекомендуется использовать переменные CSS в :root для цветов и отступов. Это упрощает глобальные изменения и поддержку темы. Также важно учитывать псевдоклассы :hover и .selected для интерактивных элементов, чтобы сохранять читаемость и логическую иерархию интерфейса.
Добавление пользовательских настроек через блок /* @settings */ в шапке темы
Блок /* @settings */ в шапке темы BetterDiscord позволяет создавать интерфейс для изменения параметров темы прямо в клиенте Discord. Каждый параметр определяется строкой с синтаксисом ключ-значение, где указываются id, type, label и начальное значение default.
Пример структуры параметра:
* @setting backgroundColor:color:Фоновый цвет:#36393F
Здесь backgroundColor – уникальный идентификатор, color – тип поля, Фоновый цвет – отображаемая подпись, а #36393F – значение по умолчанию. Типы полей включают: color, boolean, text, slider. Для slider дополнительно задаются min, max и step через двоеточие, например: * @setting padding:slider:Отступ:10:0:50:1.
После добавления блока необходимо обращаться к значениям через переменные CSS или JavaScript внутри темы. Для CSS используют синтаксис var(--backgroundColor), если значение передается через переменную, либо через скрипт получить значение с помощью API BetterDiscord.
Блок /* @settings */ размещается непосредственно под шапкой метаданных темы. Его изменения автоматически распознаются клиентом, что позволяет пользователю изменять цвета, размеры и другие параметры без правки CSS-файла вручную.
Для поддержки изменений рекомендуется использовать переменные CSS в :root и ссылаться на них внутри селекторов. Это обеспечивает совместимость и удобное масштабирование темы, а также позволяет избежать дублирования значений при добавлении новых пользовательских параметров.
Публикация и поддержка: версия, совместимость, проверка конфликтов с плагинами
Перед публикацией темы укажите её версию в заголовке метаданных, например @version 1.0.0. Используйте семантическое версионирование: первый номер – крупные изменения, второй – исправления и новые функции, третий – мелкие патчи.
Проверяйте совместимость с актуальной версией Discord и BetterDiscord. Тестируйте тему на нескольких устройствах и разрешениях экрана, учитывая различия между светлой и тёмной схемами интерфейса.
Перед выпуском обновлений убедитесь, что новые стили не ломают элементы, добавленные популярными плагинами. Включите проверку конфликтов с плагинами, отключая их поочерёдно и анализируя визуальные и функциональные изменения.
Документируйте известные ограничения и требования к плагинам в описании темы. Указывайте, с какими версиями BetterDiscord и конкретными плагинами тестировалась тема, чтобы пользователи могли избежать несовместимостей.
При выпуске новых версий сохраняйте обратную совместимость, если это возможно. Обновления публикуйте через официальные репозитории или форумы, указывая изменения, исправления и рекомендации по установке для текущей версии Discord.
Вопрос-ответ:
Как проверить совместимость своей темы с установленными плагинами?
Совместимость проверяется путём последовательного включения темы и каждого плагина. Некоторые плагины изменяют те же элементы интерфейса, что и тема, что может вызвать конфликты. Для обнаружения проблем стоит использовать консоль разработчика Discord (Ctrl+Shift+I), чтобы увидеть ошибки CSS или JS, а также временно отключать плагины и тестировать, корректно ли отображается интерфейс при их совместной работе с темой.
Как опубликовать тему, чтобы другие пользователи могли её установить?
Тему можно выложить на GitHub, BetterDocs или другие ресурсы для обмена темами. Файл .theme.css должен быть полностью готов, без тестовых селекторов. Рекомендуется прикрепить описание, инструкции по установке, список поддерживаемых версий Discord и ссылки на используемые шрифты. Так пользователи смогут корректно установить тему через меню BetterDiscord и использовать её с нужными плагинами.
Загрузка...
