> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Використовуйте теми, щоб кольори та заокруглення кутів були однаковими на всіх екранах Flowstep

> Виберіть або згенеруйте тему для кожного файлу, змінюйте стиль окремих екранів, редагуйте теми вашої організації та прив'язуйте кольори й заокруглення до токенів теми, щоб зміни поширювалися на всі екрани.

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

Теми, які ви створюєте або генеруєте, зберігаються в організації та відображаються в розділі **Themes** на Home, тож будь-який файл в організації може їх використовувати.

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

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

<Steps>
  <Step title="Відкрийте меню теми">
    У редакторі промптів натисніть кнопку теми. Вона показує колір поточної теми або кольорове коло, якщо тема **Automatic**. Меню має назву **Theme for new screens**.
  </Step>

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

  <Step title="Виберіть зовнішній вигляд">
    У розділі **Appearance** виберіть **Light** або **Dark**, чи **Automatic**, щоб Flowstep вирішував для кожного екрана на основі промпту. Наприклад, «темна панель керування» буде темною.
  </Step>
</Steps>

<Note>
  Ваш вибір застосовується до екранів, які ви згенеруєте далі. Екрани, що вже є на полотні, зберігають свій вигляд.
</Note>

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

Якщо у файлу ще немає теми, тобто це новий файл, де тема залишена на **Automatic**, Flowstep створює власну тему разом із першими екранами, які генерує. Поки це відбувається, у чаті з'являється крок **Designing theme**.

Flowstep створює тему на основі:

* Кольорів, які ви називаєте у промпті
* Кольорів у ваших [рекомендаціях з дизайну](/uk/design-guidelines)
* Фірмових кольорів із вкладень і [посилань, які ви вставляєте](/uk/design-references#paste-a-url)
* Продукту та настрою, які описує ваш промпт, якщо немає більш конкретних даних

Тема отримує коротку назву, повну палітру для світлого й темного режимів і крок заокруглення. Її зберігають в організації в розділі **Themes** на Home, і файл використовує її для всіх екранів, згенерованих після цього.

Коли у файлу вже є тема, Flowstep не створює іншу самостійно. Щоб отримати нову тему, знову виберіть **Automatic** у меню теми: наступна генерація створить нову, і файл перейде на неї. Якщо Flowstep не може створити тему, файл використовує вбудовану.

<Tip>
  Згадайте фірмові кольори в першому промпті або задайте їх у [рекомендаціях з дизайну](/uk/design-guidelines) перед генерацією, і згенерована тема почнеться з них.
</Tip>

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

Щоб змінити стиль одного екрана, не чіпаючи решту файлу:

1. Виберіть екран на полотні.
2. У меню над екраном натисніть кнопку **Theme**.
3. Виберіть одну з тем вашої організації або вбудовану тему чи перемкніть між **Light** і **Dark**.

Зміна теми миттєво перефарбовує екран. Перемикання між **Light** і **Dark** просить AI змінити стиль екрана так само, як [AI-редагування](/uk/editing-designs). Меню недоступне, поки виконується генерація.

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

Відкрийте тему в розділі **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. Видалена тема більше не пропонується в меню тем, але екрани, які її вже використовують, зберігають свій вигляд, тож на полотні нічого не змінюється.

<Note>
  Редагувати й видаляти теми можуть усі учасники організації, крім Guest (гостей).
</Note>

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

Кольори та кути можуть посилатися на токен теми замість фіксованого значення. Прив'язане значення слідує за темою екрана, тож коли тема змінюється (інша тема, опублікована зміна або перемикання між світлим і темним режимами), прив'язані кольори й кути оновлюються разом із нею.

**Colors** — на панелі **Fill** або **Border** натисніть зразок кольору. На вкладці **Token** знайдіть токен або виберіть його в групах **Theme**, **Base** або **Tailwind**. Щоб вказати точний колір, скористайтеся вкладкою **Custom**. Прив'язаний колір показує назву свого токена на панелі, і ви все ще можете змінити його непрозорість.

**Corners** — на панелі **Corners** натисніть попередній перегляд кута. На вкладці **Token** виберіть крок (наприклад, `md` або `lg`). На вкладці **Custom** введіть точне значення в пікселях. Прив'язаний кут показує назву свого токена, а зміна заокруглення теми перераховує його.

Щоб перетворити прив'язане значення назад на фіксоване, натисніть **Detach from token**. Колір або кут зберігає поточний вигляд, але більше не слідує за темою.

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

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.