Skip to main content
Тема — це спільна палітра кольорів і заокруглення кутів для ваших екранів. У кожного файлу є тема та зовнішній вигляд (світлий або темний), а стиль екранів задається токенами теми. Змініть тему, і всі екрани, що її використовують, оновляться. Так ваша команда працює з одним набором рішень, а не повторює кольори в кожному промпті. Теми, які ви створюєте або генеруєте, зберігаються в організації та відображаються в розділі Themes на Home, тож будь-який файл в організації може їх використовувати.

​
Вибір теми для файлу

Виберіть тему й зовнішній вигляд для нових екранів у редакторі промптів всередині файлу. Кнопки теми немає в полі промпту на Home.
1

Відкрийте меню теми

У редакторі промптів натисніть кнопку теми. Вона показує колір поточної теми або кольорове коло, якщо тема Automatic. Меню має назву Theme for new screens.
2

Виберіть тему

Виберіть Automatic, одну з тем вашої організації (вони показані першими) або вбудовану тему: Default, Blue, Grayscale, Green, Ice, Orange, Red, Rose, Violet або Yellow.
3

Виберіть зовнішній вигляд

У розділі Appearance виберіть Light або Dark, чи Automatic, щоб Flowstep вирішував для кожного екрана на основі промпту. Наприклад, «темна панель керування» буде темною.
Ваш вибір застосовується до екранів, які ви згенеруєте далі. Екрани, що вже є на полотні, зберігають свій вигляд.

​
Нехай Flowstep створить тему

Якщо у файлу ще немає теми, тобто це новий файл, де тема залишена на Automatic, Flowstep створює власну тему разом із першими екранами, які генерує. Поки це відбувається, у чаті з’являється крок Designing theme. Flowstep створює тему на основі: Тема отримує коротку назву, повну палітру для світлого й темного режимів і крок заокруглення. Її зберігають в організації в розділі Themes на Home, і файл використовує її для всіх екранів, згенерованих після цього. Коли у файлу вже є тема, Flowstep не створює іншу самостійно. Щоб отримати нову тему, знову виберіть Automatic у меню теми: наступна генерація створить нову, і файл перейде на неї. Якщо Flowstep не може створити тему, файл використовує вбудовану.
Згадайте фірмові кольори в першому промпті або задайте їх у рекомендаціях з дизайну перед генерацією, і згенерована тема почнеться з них.

​
Зміна теми одного екрана

Щоб змінити стиль одного екрана, не чіпаючи решту файлу:
  1. Виберіть екран на полотні.
  2. У меню над екраном натисніть кнопку Theme.
  3. Виберіть одну з тем вашої організації або вбудовану тему чи перемкніть між Light і Dark.
Зміна теми миттєво перефарбовує екран. Перемикання між Light і Dark просить AI змінити стиль екрана так само, як AI-редагування. Меню недоступне, поки виконується генерація.

​
Редагування теми

Відкрийте тему в розділі Themes на Home. Редактор теми показує живий попередній перегляд теми, а праворуч — Theme settings. Використовуйте кнопки Light і Dark угорі, щоб перемкнути попередній перегляд, і натисніть назву теми, щоб перейменувати її.
  • Colors — кожна група кольорів має зразок для світлого та темного режимів: Primary, Secondary, Accent, Muted, Destructive, Background, Card, Popover, Border, Input, Ring, Charts і Sidebar. Натисніть зразок, щоб змінити його кольори, наприклад заливку та колір тексту групи, за допомогою палітри кольорів або HEX-значення.
  • Radius — виберіть крок заокруглення (Square, Slight, Balanced, Soft або Round) або виберіть Custom і перетягніть Base radius, щоб задати власне значення.
Ваші зміни зберігаються як чернетка, тож екрани не змінюються, поки ви працюєте. Коли будете готові:
  • Натисніть Publish, щоб оновити всі екрани, які використовують тему. Flowstep підтверджує повідомленням “Published. Screens using this theme are updating.” (Опубліковано. Екрани, що використовують цю тему, оновлюються.)
  • Натисніть Reset changes, щоб скасувати неопубліковані зміни. Екрани, що використовують тему, не змінюються.
Щоб видалити тему, натисніть Delete theme внизу розділу Theme settings або значок кошика поруч із нею в списку Themes на Home. Видалена тема більше не пропонується в меню тем, але екрани, які її вже використовують, зберігають свій вигляд, тож на полотні нічого не змінюється.
Редагувати й видаляти теми можуть усі учасники організації, крім Guest (гостей).

​
Прив’язка кольорів і кутів до теми

Кольори та кути можуть посилатися на токен теми замість фіксованого значення. Прив’язане значення слідує за темою екрана, тож коли тема змінюється (інша тема, опублікована зміна або перемикання між світлим і темним режимами), прив’язані кольори й кути оновлюються разом із нею. Colors — на панелі Fill або Border натисніть зразок кольору. На вкладці Token знайдіть токен або виберіть його в групах Theme, Base або Tailwind. Щоб вказати точний колір, скористайтеся вкладкою Custom. Прив’язаний колір показує назву свого токена на панелі, і ви все ще можете змінити його непрозорість. Corners — на панелі Corners натисніть попередній перегляд кута. На вкладці Token виберіть крок (наприклад, md або lg). На вкладці Custom введіть точне значення в пікселях. Прив’язаний кут показує назву свого токена, а зміна заокруглення теми перераховує його. Щоб перетворити прив’язане значення назад на фіксоване, натисніть Detach from token. Колір або кут зберігає поточний вигляд, але більше не слідує за темою.

​
Корисна інформація

  • Екрани зберігають власну тему — кожен екран пам’ятає свою тему та зовнішній вигляд. Зміна теми файлу впливає лише на екрани, які ви згенеруєте далі. Щоб змінити стиль наявних, використовуйте меню Theme для кожного екрана.
  • Лише опубліковані версії — екрани показують опубліковану версію теми. Чернетки видно лише в редакторі теми, доки ви їх не опублікуєте.
  • Прив’язки до токенів зберігаються після змін — кольори теми, використані в тінях, фільтрах і градієнтах, залишаються прив’язаними до теми, коли Flowstep редагує або перегенеровує екран.
  • Кроки заокруглення, що не масштабуються — токени кутів none і full завжди квадратні та повністю округлі, незалежно від заокруглення теми.