Это руководство объясняет, как настроить цветовые палитры светлого и темного режимов для темы вашего сайта Discourse. Оно охватывает конфигурацию на уровне темы, назначение палитр и аспекты пользовательского интерфейса.
Требуемый уровень пользователя: Администратор
Настройка отдельных цветовых палитр для светлого и темного режимов позволяет представить ваше сообщество Discourse так, чтобы это соответствовало вашему бренду, улучшало доступность и давало пользователям контроль над их опытом просмотра. Недавние улучшения системы темизации Discourse позволяют назначать предпочитаемую светлую и темную палитру каждой теме, а также дают пользователям возможность выбрать желаемый внешний вид.
Краткое содержание
Это руководство охватывает:
- Понимание назначения палитр светлого и темного режимов
- Назначение цветовых палитр светлого и темного режимов теме
- Управление цветовыми палитрами вашего сайта
- Включение селектора цветового режима для пользователей
- Понимание опций, доступных пользователям
- Лучшие практики использования палитр и обеспечения доступности
Понимание назначения палитр светлого и темного режимов
Темы Discourse поддерживают явное назначение как «светлой», так и «темной» цветовой палитры. Таким образом, любая тема может автоматически переключаться в зависимости от системных настроек пользователя или позволять пользователю выбрать предпочитаемый режим, сохраняя при этом ваши фирменные цвета.
Назначение палитр светлого и темного режимов теме
Для настройки цветовых палитр вашей темы:
-
Перейдите в Администрирование > Внешний вид > Темы и компоненты (
/admin/config/customize/themes) -
Нажмите на тему, которую хотите отредактировать.
-
В настройках темы найдите раздел Цветовые палитры.
-
Для обоих пунктов Цветовая палитра и Темная цветовая палитра выберите нужную палитру.
-
Нажмите Сохранить в нижней части страницы настроек темы.
Это гарантирует, что тема вашего сайта будет использовать правильную палитру как для пользователей светлого, так и для темного режимов. Обратите внимание, что другие палитры, выбираемые пользователем, по-прежнему могут быть выбраны вашими участниками, но те, которые вы установите здесь, будут использоваться по умолчанию.
Управление цветовыми палитрами
Все доступные цветовые палитры (и связанные с ними назначения) можно управлять централизованно:
-
Перейдите в Администрирование > Внешний вид > Цветовые палитры (
/admin/config/colors) -
Здесь вы можете редактировать, добавлять или удалять палитры, отмечать их как выбираемые пользователем и назначать их в качестве светлой и темной палитр по умолчанию для вашей темы.
Включение селектора цветового режима
Прежде чем пользователи смогут переключаться между светлым и темным режимом на сайте, необходимо включить настройку сайта interface_color_selector. По умолчанию она установлена в значение отключено.
Чтобы включить её:
- Перейдите в Администрирование > Настройки и найдите
interface color selector. - Установите одно из следующих значений:
- Отображать в нижнем колонтитуле боковой панели — добавляет переключатель светлого/темного/автоматического режима в нижнюю часть боковой панели
- Отображать в заголовке — добавляет переключатель в заголовок сайта
Без включения этой настройки пользователи не увидят переключатель цветового режима на сайте, и сайт будет автоматически следовать системным предпочтениям каждого пользователя.
Опции, доступные пользователям
Настройки пользователя
Пользователи могут выбрать предпочитаемый режим просмотра сайта:
-
Перейдите в Настройки пользователя > Интерфейс
-
В разделе «Цветовая палитра» участники могут выбрать предпочитаемые светлую и темную палитры, а также режим, который они хотят использовать: Светлый, Темный, Авто:
Если выбрано «Авто», Discourse адаптируется к предпочтениям пользователя относительно цветовой схемы системы.
Лучшие практики
- Согласованность бренда: Настройте палитры так, чтобы они соответствовали вашему бренду для обоих режимов. Сохраняйте основные цвета неизменными, но корректируйте их для обеспечения контрастности и читаемости.
- Доступность: Убедитесь, что коэффициенты контрастности цветов соответствуют рекомендациям WCAG (этот инструмент может помочь), особенно в темном режиме, где некоторые цвета могут казаться приглушенными.
- Тестирование на нескольких устройствах: Проверяйте внешний вид в обоих режимах на различных устройствах и в разных браузерах.
- Ассеты логотипа: Вы можете загрузить отдельные логотипы для светлого и темного режимов в разделе Администрирование > Внешний вид > Логотип сайта (
/admin/config/logo). - Ограничьте количество палитр: Предлагайте только те палитры, которые нужны пользователям или которые они считают разумными.
Часто задаваемые вопросы
Могу ли я иметь более одной темной или светлой палитры?
Да, но рекомендуется оставить одну основную палитру для каждого режима, чтобы избежать путаницы. Назначайте темам только основные палитры для выбора пользователями.
Могу ли я заставить всех использовать только светлый (или только темный) режим?
Вы можете сделать это, установив одну и ту же палитру в качестве светлой и темной палитры по умолчанию и убедившись, что никакие другие палитры не доступны для выбора пользователем.
Будут ли пользовательские компоненты тем автоматически корректировать цвета?
Если они используют переменные цветов CSS Discourse (например, --primary, --secondary), они унаследуют палитру. Лучше избегать жестко заданных цветов в пользовательском CSS.
Меняет ли переключение палитры всю тему или только цвета?
Изменяются только переменные цветов. Структура, шрифты и макет остаются неизменными при смене цветовой палитры.