Перейти к содержанию

Конструктор собственной темы

Конструктор позволяет настроить 24 цвета и сохранить одну собственную палитру в своём аккаунте. Для начала откройте Сервисы → Оформление админки → Конструктор темы.

Изменения в полях сначала видны только в отдельном предпросмотре. После сохранения или импорта новые цвета применятся к административной панели, если выбрана «Моя тема — конструктор» и администратор не отключил оформление.

Название, готовая основа, цветовые поля и живой предпросмотр конструктора

В примере показана личная палитра «Ночная студия». Её название и цвета можно заменить своими.

Выбрать основу

  1. В списке «Основа» выберите одну из шести тёмных палитр.
  2. Нажмите «Загрузить основу».
  3. Укажите своё «Название темы» и измените нужные цвета.

Кнопка «Загрузить основу» заменяет название и цвета в форме. На сервер они пока не сохраняются. Если вы уже подобрали другой вариант и хотите его оставить, сначала сохраните его или запишите значения.

Название должно содержать от 1 до 60 символов после удаления пробелов по краям. Пустое название, знаки <, > и управляющие символы не принимаются. Светлой основы в конструкторе нет.

Настроить цвета

Цвет можно выбрать встроенным инструментом рядом с полем или ввести в формате #RRGGBB, например #191A2B. Нужны ровно шесть шестнадцатеричных цифр. Короткая запись #123, прозрачность, rgb() и hsl() не поддерживаются.

Поле За что отвечает
Общий фон Основной фон административной рабочей области.
Верхняя панель Цвет верхней служебной панели.
Карточки и панели Поверхности форм и карточек. Этот цвет используется для расчёта контраста с основным текстом.
Чередующаяся строка Дополнительный фон строк таблицы.
Заголовки и кнопки Приподнятые поверхности заголовков и кнопок.
Фон при наведении Поверхность элемента под указателем мыши.
Выбранный элемент Фон выбранной строки или пункта.
Выбранный при наведении Фон уже выбранного элемента под указателем.
Границы Линии между поверхностями и рамки элементов.
Основной текст Основной цвет текста.
Второстепенный текст Вспомогательные подписи.
Ссылки Цвет обычных ссылок.
Просмотренные ссылки Цвет посещённых ссылок там, где интерфейс различает это состояние.
Приглушённые даты Приглушённый текст соответствующих элементов.
Фон полей ввода Внутренняя поверхность текстовых полей.
Предупреждение: текст Текст предупреждения.
Предупреждение: фон Поверхность предупреждения.
Предупреждение: граница Рамка предупреждения.
Успех: текст Текст сообщения об успешном действии.
Успех: фон Поверхность сообщения об успехе.
Успех: граница Рамка сообщения об успехе.
Ошибка: текст Текст сообщения об ошибке.
Ошибка: фон Поверхность сообщения об ошибке.
Ошибка: граница Рамка сообщения об ошибке.

Уведомления используют отдельные группы цветов. Оставляйте предупреждение, успех и ошибку различимыми и проверяйте читаемость текста на их фоне.

Проверить предпросмотр и контраст

Предпросмотр показывает текст, ссылки, поле ввода, таблицу с выбранной строкой, кнопку и три вида уведомлений. После изменения цветов проверьте эти элементы вместе: хорошо видимый основной текст ещё не означает, что ссылка или сообщение об ошибке читаются так же хорошо.

Под предпросмотром отображается показатель контраста «Основной текст / фон карточки». Если он ниже 4,5:1, конструктор предлагает увеличить различие между этими цветами.

Этот показатель проверяет только одну пару цветов. Он не оценивает весь интерфейс, все состояния кнопок и уведомлений и не подтверждает доступность палитры в целом.

Сохранить и включить

  1. Проверьте название, 24 цвета и предпросмотр.
  2. Оставьте флажок «Сразу включить мою тему», если хотите сразу использовать эту палитру.
  3. Нажмите «Сохранить палитру».

Палитра заменит предыдущую собственную палитру аккаунта. С установленным флажком личный выбор одновременно переключится на «Моя тема — конструктор». После перезагрузки откройте вкладку «Личная тема» и проверьте «Применяемую тему».

Если флажок снят, сохранится прежний личный выбор. Например, при выбранной Dracula новая собственная палитра сохранится, а Dracula продолжит использоваться.

Если «Моя тема» уже активна

Снятый флажок не защищает активную собственную тему от изменения. Сохранение новой палитры заменяет её цвета, и после перезагрузки они применятся. Чтобы сохранить другую палитру, не применяя её, сначала выберите готовую тему на вкладке «Личная тема» и сохраните выбор.

Если администратор отключил темы для сайта, сохранение не отменит общий выключатель. Настройки останутся в аккаунте и начнут действовать после включения.

Вернуть сохранённые цвета

Кнопка «Вернуть сохранённые цвета» возвращает название и цвета, с которыми открылась страница конструктора. Это отмена несохранённых изменений формы, а не удаление палитры.

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

Импорт и экспорт JSON

Сохранение палитры, показатель контраста и блок импорта и экспорта JSON

У сохранения палитры и у импорта отдельные флажки «Сразу включить мою тему». Проверьте флажок рядом с выполняемой командой.

Скачать сохранённую палитру

Нажмите «Скачать тему в JSON». Браузер скачает globalit-admindark-theme.json.

  • Если собственная палитра есть, экспортируется именно она.
  • Несохранённые изменения формы не входят в файл: сначала нажмите «Сохранить палитру», если хотите перенести их.
  • Если собственной палитры нет, экспортируется текущая готовая тёмная тема. При светлой теме используется стандартная тёмная основа.

Храните отдельные файлы для разных вариантов и переименовывайте их так, чтобы различать палитры. Для переноса на другой сайт модуль должен быть установлен и там.

Загрузить палитру из файла

  1. При необходимости сначала экспортируйте свою текущую палитру: импорт заменит её.
  2. В блоке «Импорт и экспорт» выберите в поле «Файл темы» JSON-файл, экспортированный модулем.
  3. Проверьте флажок «Сразу включить мою тему» рядом с кнопкой импорта.
  4. Нажмите «Импортировать тему».
  5. После перезагрузки проверьте название, цвета и применяемую тему.

Импорт сразу сохраняет палитру в вашем аккаунте. Это не предварительное заполнение формы. С флажком она одновременно включается, без флажка сохраняется прежний выбор темы. Если собственной темой вы уже пользуетесь, новые цвета применятся и без флажка — действует то же правило, что при сохранении.

Импорт в ваш аккаунт не меняет палитры коллег. Чтобы команда использовала одинаковый вариант, каждый сотрудник может импортировать один и тот же файл.

Требования к файлу

Параметр Требование версии 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 и не удаляйте неизвестные на вид цветовые ключи. Начните с нового экспорта из модуля и изменяйте только название и значения цветов. Проверка ошибок импорта.