- Документация
- Тёмная тема
- Конструктор темы и перенос JSON в globalit.admindark 1.1.0
Конструктор собственной темы
Конструктор позволяет настроить 24 цвета и сохранить одну собственную палитру в своём аккаунте. Для начала откройте Сервисы → Оформление админки → Конструктор темы.
Изменения в полях сначала видны только в отдельном предпросмотре. После сохранения или импорта новые цвета применятся к административной панели, если выбрана «Моя тема — конструктор» и администратор не отключил оформление.
В примере показана личная палитра «Ночная студия». Её название и цвета можно заменить своими.
Выбрать основу
- В списке «Основа» выберите одну из шести тёмных палитр.
- Нажмите «Загрузить основу».
- Укажите своё «Название темы» и измените нужные цвета.
Кнопка «Загрузить основу» заменяет название и цвета в форме. На сервер они пока не сохраняются. Если вы уже подобрали другой вариант и хотите его оставить, сначала сохраните его или запишите значения.
Название должно содержать от 1 до 60 символов после удаления пробелов по краям. Пустое название, знаки <, > и управляющие символы не принимаются. Светлой основы в конструкторе нет.
Настроить цвета
Цвет можно выбрать встроенным инструментом рядом с полем или ввести в формате #RRGGBB, например #191A2B. Нужны ровно шесть шестнадцатеричных цифр. Короткая запись #123, прозрачность, rgb() и hsl() не поддерживаются.
| Поле | За что отвечает |
|---|---|
| Общий фон | Основной фон административной рабочей области. |
| Верхняя панель | Цвет верхней служебной панели. |
| Карточки и панели | Поверхности форм и карточек. Этот цвет используется для расчёта контраста с основным текстом. |
| Чередующаяся строка | Дополнительный фон строк таблицы. |
| Заголовки и кнопки | Приподнятые поверхности заголовков и кнопок. |
| Фон при наведении | Поверхность элемента под указателем мыши. |
| Выбранный элемент | Фон выбранной строки или пункта. |
| Выбранный при наведении | Фон уже выбранного элемента под указателем. |
| Границы | Линии между поверхностями и рамки элементов. |
| Основной текст | Основной цвет текста. |
| Второстепенный текст | Вспомогательные подписи. |
| Ссылки | Цвет обычных ссылок. |
| Просмотренные ссылки | Цвет посещённых ссылок там, где интерфейс различает это состояние. |
| Приглушённые даты | Приглушённый текст соответствующих элементов. |
| Фон полей ввода | Внутренняя поверхность текстовых полей. |
| Предупреждение: текст | Текст предупреждения. |
| Предупреждение: фон | Поверхность предупреждения. |
| Предупреждение: граница | Рамка предупреждения. |
| Успех: текст | Текст сообщения об успешном действии. |
| Успех: фон | Поверхность сообщения об успехе. |
| Успех: граница | Рамка сообщения об успехе. |
| Ошибка: текст | Текст сообщения об ошибке. |
| Ошибка: фон | Поверхность сообщения об ошибке. |
| Ошибка: граница | Рамка сообщения об ошибке. |
Уведомления используют отдельные группы цветов. Оставляйте предупреждение, успех и ошибку различимыми и проверяйте читаемость текста на их фоне.
Проверить предпросмотр и контраст
Предпросмотр показывает текст, ссылки, поле ввода, таблицу с выбранной строкой, кнопку и три вида уведомлений. После изменения цветов проверьте эти элементы вместе: хорошо видимый основной текст ещё не означает, что ссылка или сообщение об ошибке читаются так же хорошо.
Под предпросмотром отображается показатель контраста «Основной текст / фон карточки». Если он ниже 4,5:1, конструктор предлагает увеличить различие между этими цветами.
Этот показатель проверяет только одну пару цветов. Он не оценивает весь интерфейс, все состояния кнопок и уведомлений и не подтверждает доступность палитры в целом.
Сохранить и включить
- Проверьте название, 24 цвета и предпросмотр.
- Оставьте флажок «Сразу включить мою тему», если хотите сразу использовать эту палитру.
- Нажмите «Сохранить палитру».
Палитра заменит предыдущую собственную палитру аккаунта. С установленным флажком личный выбор одновременно переключится на «Моя тема — конструктор». После перезагрузки откройте вкладку «Личная тема» и проверьте «Применяемую тему».
Если флажок снят, сохранится прежний личный выбор. Например, при выбранной Dracula новая собственная палитра сохранится, а Dracula продолжит использоваться.
Если «Моя тема» уже активна
Снятый флажок не защищает активную собственную тему от изменения. Сохранение новой палитры заменяет её цвета, и после перезагрузки они применятся. Чтобы сохранить другую палитру, не применяя её, сначала выберите готовую тему на вкладке «Личная тема» и сохраните выбор.
Если администратор отключил темы для сайта, сохранение не отменит общий выключатель. Настройки останутся в аккаунте и начнут действовать после включения.
Вернуть сохранённые цвета
Кнопка «Вернуть сохранённые цвета» возвращает название и цвета, с которыми открылась страница конструктора. Это отмена несохранённых изменений формы, а не удаление палитры.
Если собственной палитры ещё нет, исходными служат цвета текущей готовой тёмной темы, а при светлой теме — стандартная тёмная основа. После сохранения новой палитры восстановить прежнюю этой кнопкой нельзя. Для хранения нескольких вариантов используйте JSON-файлы.
Импорт и экспорт JSON
У сохранения палитры и у импорта отдельные флажки «Сразу включить мою тему». Проверьте флажок рядом с выполняемой командой.
Скачать сохранённую палитру
Нажмите «Скачать тему в JSON». Браузер скачает globalit-admindark-theme.json.
- Если собственная палитра есть, экспортируется именно она.
- Несохранённые изменения формы не входят в файл: сначала нажмите «Сохранить палитру», если хотите перенести их.
- Если собственной палитры нет, экспортируется текущая готовая тёмная тема. При светлой теме используется стандартная тёмная основа.
Храните отдельные файлы для разных вариантов и переименовывайте их так, чтобы различать палитры. Для переноса на другой сайт модуль должен быть установлен и там.
Загрузить палитру из файла
- При необходимости сначала экспортируйте свою текущую палитру: импорт заменит её.
- В блоке «Импорт и экспорт» выберите в поле «Файл темы» JSON-файл, экспортированный модулем.
- Проверьте флажок «Сразу включить мою тему» рядом с кнопкой импорта.
- Нажмите «Импортировать тему».
- После перезагрузки проверьте название, цвета и применяемую тему.
Импорт сразу сохраняет палитру в вашем аккаунте. Это не предварительное заполнение формы. С флажком она одновременно включается, без флажка сохраняется прежний выбор темы. Если собственной темой вы уже пользуетесь, новые цвета применятся и без флажка — действует то же правило, что при сохранении.
Импорт в ваш аккаунт не меняет палитры коллег. Чтобы команда использовала одинаковый вариант, каждый сотрудник может импортировать один и тот же файл.
Требования к файлу
| Параметр | Требование версии 1.1.0 |
|---|---|
| Размер | Не более 16 КиБ, то есть 16 384 байт. |
| Формат | JSON в UTF-8. BOM, добавленный редактором Windows, допускается. |
| Поля верхнего уровня | Только format, version, name, colors. |
format |
Строка globalit.admindark.theme. |
version |
Целое число 1, а не строка "1". |
name |
От 1 до 60 символов, с ограничениями названия темы. |
colors |
Ровно 24 известных поля, каждое со значением #RRGGBB. |
Произвольные CSS, JavaScript, дополнительные ключи, пропущенные цвета и файловые пути не принимаются. Загруженный JSON не сохраняется как файл в каталогах сайта; модуль сохраняет проверенные название и цвета.
Скачать пример «Ночная студия» — полный файл для проверки импорта. Он заменит вашу собственную палитру, поэтому сначала экспортируйте её, если хотите сохранить.
При ошибке не сокращайте JSON и не удаляйте неизвестные на вид цветовые ключи. Начните с нового экспорта из модуля и изменяйте только название и значения цветов. Проверка ошибок импорта.

