Если вы нажмете на аватарку вашего профиля, расположенную в верхнем левом углу экрана, в правом углу появится возможность выбрать тему интерфейса: светлую или тёмную. Вы можете выбрать одну из тем вручную или настроить автоматическое переключение, чтобы темная тема активировалась в соответствии с настройками вашей операционной системы.
Тёмная тема является возможностью системы 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 необходимо соблюдать следующие правила:
Поддержка темной и светлой темы реализована через 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); /* частный случай с прозрачным */
}