Темная тема

Оглавление

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

Тёмная тема является возможностью системы amoCRM, которая позволяет пользователям настроить интерфейс под свои предпочтения. Для успешной интеграции с темной темой необходимо использовать предопределенные переменные, объявленные в CSS, и соблюдать определенные правила, чтобы гарантировать совместимость и целостность дизайна.

Использование переменных в темной теме:

Тёмная тема в amoCRM опирается на использование переменных, которые объявлены в CSS. Эти переменные предоставляют возможность настраивать цвета и стилизационные параметры интерфейса. Для доступа к этим переменным необходимо обратиться к макету в Figma, где они будут подробно описаны и продемонстрированы.

Пример реализации

В качестве примера будем использовать input.

.input {
  color: var(--palette-text-secondary-dark);
  border: 1px solid var(--palette-border-default);
  background-color: var(--palette-background-primary);
}

Правила для интеграторов:

При разработке интеграции с темной темой в amoCRM необходимо соблюдать следующие правила:

  1. Желательно использовать предоставленные переменные: это гарантирует согласованность и стабильность внешнего вида системы и предотвращает возможные конфликты и ошибки, но если у вас есть свои корпоративные цвета и вам не подходят наши, то нужно использовать данное решение.
  2. Не переопределять переменные: интеграторам не разрешается переопределять предопределенные переменные, объявленные в CSS темной темы. Это позволяет сохранить целостность стилей и избежать несовместимости с обновлениями системы.
  3. Использование переменных только для соответствующих элементов: переменные, связанные с текстом, рамками и фоном, должны использоваться только для соответствующих элементов в интерфейсе. Например, переменные, определенные для текста, могут быть применены только к элементам, содержащим текст, и не должны использоваться для изменения других стилей.

Кастомные переменные для интеграций

Поддержка темной и светлой темы реализована через data-атрибут тега html “[data-color-scheme="dark"]”. В системе используются переменные для цветов объявленные через :root. Вам нужно использовать уникальные переменные, например, можно включать код своего виджета в название переменной.

Пример переменных для цветов

:root {
  --example-code-widget-color-white: #ffffff;
  --example-code-widget-color-anti-flash-white: #f2f2f2;
  --example-code-widget-color-cultured: #f5f5f5;
  --example-code-widget-color-onyx: #363b44;
  --example-code-widget-color-dark-gunmetal: #0f2231;
  --example-code-widget-color-spanish-gray: #92989b;
  --example-code-widget-color-dark-silver: #6b6d72;
}

При объявлении переменных для фона и текста, вы должны использовать переменные уже существующих цветов. В частных случаях, можно использовать цвета без переменных.

Пример для светлой темы

:root {
  --example-code-widget-text-primary: var( --example-code-widget-color-onyx); /* text */
  --example-code-widget-background-default: var(--example-code-widget-color-cultured); /* background */
  --example-code-widget-overlay-background-primary-600: rgba(255, 255, 255, 0.6); /* частный случай с фоном */
}

Пример для темной темы

В темной теме нужно использовать data attribute

:root[data-color-scheme="dark"] {
  --example-code-widget-text-primary: var(--example-code-widget-color-anti-flash-white); /* text */
  --example-code-widget-background-default: var(--example-code-widget-color-dark-gunmetal); /* background */
  --example-code-widget-overlay-background-primary-600: rgba(0, 0, 0, 0.6); /* частный случай с прозрачным */
}