Более плавное редактирование цветовой палитры

Познакомьтесь с следующим этапом эволюции управления брендингом вашего сообщества — новым интерфейсом для создания и редактирования цветовых палитр!

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

:sparkles: Что нового?

Новый интерфейс цветовых палитр seamlessly интегрируется с общей системой дизайна администратора, обеспечивая целостный опыт, который делает управление палитрами одновременно мощным и доступным.

Новый интерфейс включает:

  • Интегрированный дизайн, соответствующий эстетике современного административного интерфейса.

  • Понятные названия, чтобы вы точно знали, как применяется каждый цвет.

  • Более плавный рабочий процесс для создания новых палитр или изменения существующих.

  • Элементы управления палитрой по умолчанию прямо в интерфейсе редактирования как для светлого, так и для темного режимов.

При создании новой палитры вы теперь можете увидеть визуальный предварительный просмотр базовой палитры перед ее выбором:

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

:rocket: Как получить доступ к новому интерфейсу

Новый интерфейс цветовых палитр уже доступен для всех сайтов Discourse! Вы можете получить к нему доступ, выполнив следующие действия:

  1. Перейдите в раздел АдминистрированиеВнешний видЦветовые палитры.

  2. Нажмите Редактировать на любой существующей палитре или кнопку Новый, чтобы создать новую палитру.


Это последнее обновление отражает нашу постоянную приверженность предоставлению администраторам мощных и удобных инструментов для настройки внешнего вида их сообществ Discourse.

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

Есть вопросы или отзывы о новом интерфейсе? Мы будем рады услышать от вас в ответах ниже!

13 лайков

Возможно ли добавить более тонкие настройки цветов? Для получения оттенков, близких к введённым цветовым кодам, требуется много вычислений, и не все они хорошо работают в некоторых сценариях. Обычно я бы сделал это через пользовательский CSS, но я настроил тему Horizon, и в ней нет возможности редактировать CSS. Поэтому я понял, что это всё-таки должно входить в настройки цветовой палитры.

На самом деле лучшим решением было бы добавить опцию пользовательского CSS здесь (очевидно, что пользователь будет работать только с цветами), а также предоставить Horizon возможность редактировать CSS цветовой палитры.

Вы можете добавить пользовательский компонент в Horizon, где сможете включить свой собственный CSS.

1 лайк

Звучит отлично! Спасибо за идею.

НО моя мысль здесь была более общей (не только про Horizon). Если функция «Цветовые палитры» предназначена для того, чтобы люди могли переключать цветовые схемы по своему желанию, то пользовательские стили CSS не сильно помогут. Пользовательские стили CSS пришлось бы назначать для каждой цветовой палитры. С точки зрения архитектуры.

Можете ли вы привести больше контекста о том, что именно вы хотите делать с более тонкими настройками цветов? Это поможет понять, можно ли что-то улучшить в интерфейсе палитры, или же лучшим решением будет использование пользовательского CSS.

В настоящее время моя проблема связана с третичным цветом. Допустим, я выбрал цвет #f7b618. Это светло-желтый, и я хочу видеть его где-то в интерфейсе. Использование его в качестве цвета кнопки выглядит отлично, но текст на кнопках белый. Однако, если я изменю цвет текста кнопки, это повлияет на другие цвета. Похоже, проблема в том, что вы предполагаете, будто я выберу темный цвет, поэтому текст на кнопках будет светлым.

Кроме того, все оттенки рассчитываются на основе третичного цвета. Например, фон боковой панели (речь идет о теме Horizon). А я, возможно, захочу выбрать для этого другой цвет (например, просто серый).

Поэтому, если я немного привередлив к цветам И при этом хочу позволить пользователю выбирать цветовую палитру (что, согласен, может показаться противоречивым), я могу использовать кастомный CSS на основе цветовой палитры.

Другой вариант — режим Расширенные настройки, где вы позволяете назначать ЛЮБЫЕ цветовые переменные. Не только эти 12 основных. Тогда вы перестанете автоматически рассчитывать цвета и дадите мне возможность вручную настроить все цвета, но при этом через интерфейс.

Я думаю, что расширенный режим в значительной степени охватывается подходом репозитория на Create and share a color scheme

Я думаю, что вы можете использовать Targetable Color Schemes, чтобы переопределить что-то только для одной цветовой палитры.

2 лайка

Понятно, я нашёл больше подробностей по адресу Reference for full color customization. Там даже показан интерфейс! Отлично. Спасибо!

2 лайка

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

1 лайк

Да, но я бы сначала попробовал использовать Reference for full color customization, если это возможно. Возможно, будет достаточно получить доступ ко всем вычисляемым переменным и прописать нужные мне значения вручную. CSS может даже не понадобиться. Но если он всё же нужен, то «Целевые цветовые схемы» — определённо подходящий вариант.

1 лайк