Тема определяет, как выглядит каждый экран входа. Здесь вы создадите тему из встроенной базовой темы и цвета вашего бренда, проверите ее на настоящих формах и отдадите клиенту. Сам экран описан в разделе Themes.
Предварительные требования
- Разрешение
forms:manage. - Выбранный в консоли тенант, если тема должна принадлежать ему.
- Цвет бренда в виде
#rrggbb.
1. Создайте тему
Откройте Themes и нажмите + Create theme. Введите Theme ID, например acme-web, выберите Scope (Global или This tenant) ID и scope после создания не меняются.
2. Выберите базу и цвет бренда
В Base theme выберите карточку, ближайшую к нужному. В Look выберите цвет бренда среди образцов или введите свой #rrggbb. Значение помечается Overridden рядом со значением базы, а Reset возвращает его. Page background, Background style, Shape и Colour scheme задаются так же, либо оставьте их такими, как в базе.
3. Пойдите дальше (по желанию)
Если значений в Look мало, откройте карточку Advanced под ней. Кнопки, карточка, поля, текст и линии — токены, которые можно переопределять по одному, у каждого есть описание в одну строку, поэтому CSS нужен редко. Например, чтобы главная кнопка стала оранжевой, нажмите Add token дважды: задайте --btn равным #c2410c (отметьте Same for both, чтобы цвет был одинаков в светлой и темной схеме) и --on-btn, текст на ней, равным #ffffff. Предпросмотр меняется по мере ввода. Полный список — в разделе Токены, которые можно переопределить. Нажимайте Add custom CSS только для того, что токен не умеет. Токены и CSS применяются после выбранных цветов, формы и фона, сначала токены, потом CSS, поэтому побеждают. За контраст и маленькие экраны отвечаете вы, так что в следующем шаге посмотрите обе цветовые схемы и ширину телефона.
4. Проверьте на настоящих формах
Предпросмотр справа — это форма, которую отдал бы auth, с таблицей стилей, которую central собирает по вашим значениям и вашему CSS. Меняйте Form и State, чтобы увидеть экраны входа, одноразового кода и согласия, а Scheme — чтобы увидеть темную схему (она недоступна, если вы зафиксировали цветовую схему).
5. Сохраните
Панель внизу страницы называет несохраненное, например Unsaved: brand colour, token overrides, custom CSS. Нажмите Create theme — откроется страница новой темы.
6. Отдайте ее клиенту
Откройте клиента, нажмите Edit у Branding and logout и выберите тему в Forms Theme (Клиент). Теперь Themes показывает клиента в колонке Used by. Тему, которую использует клиент, удалить нельзя: сначала переведите клиента на другую тему.