> ## 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.

# Gebruik thema's om kleuren en hoekafronding overal in Flowstep consistent te houden

> Kies of genereer een thema voor elk bestand, pas afzonderlijke schermen aan, bewerk de thema's van je organisatie en koppel kleuren en hoeken aan thematokens, zodat wijzigingen door alle schermen stromen.

Een thema is een gedeeld kleurenpalet en een hoekafronding voor je schermen. Elk bestand heeft een thema en een weergave (licht of donker), en schermen worden gestyled met de tokens van het thema. Pas je een thema aan, dan volgt elk scherm dat het gebruikt die wijziging. Zo werkt je team met één set beslissingen in plaats van kleuren in elke prompt opnieuw op te geven.

Thema's die je maakt of genereert, worden opgeslagen in je organisatie en staan onder **Themes** op Home. Zo kan elk bestand in de organisatie ze gebruiken.

## Een thema kiezen voor een bestand

Kies het thema en de weergave voor nieuwe schermen in de prompt-composer in een bestand. De themaknop staat niet in de promptbox op Home.

<Steps>
  <Step title="Open het thememenu">
    Klik in de prompt-composer op de themaknop. Die toont het kleurvak van het huidige thema, of een kleurenwiel wanneer het thema **Automatic** is. Het menu heet **Theme for new screens**.
  </Step>

  <Step title="Kies een thema">
    Kies **Automatic**, een van de thema's van je organisatie (die staan bovenaan), of een ingebouwd thema: **Default**, **Blue**, **Grayscale**, **Green**, **Ice**, **Orange**, **Red**, **Rose**, **Violet** of **Yellow**.
  </Step>

  <Step title="Kies een weergave">
    Kies onder **Appearance** **Light** of **Dark**, of kies **Automatic** zodat Flowstep per scherm beslist op basis van je prompt. Een prompt als "a dark dashboard" levert een donker scherm op.
  </Step>
</Steps>

<Note>
  Je keuze geldt voor de schermen die je hierna genereert. Schermen die al op het canvas staan, behouden hun uitstraling.
</Note>

## Flowstep een thema laten ontwerpen

Wanneer een bestand nog geen thema heeft (een nieuw bestand waarbij het thema op **Automatic** staat), ontwerpt Flowstep een aangepast thema naast de eerste schermen die het genereert. Terwijl het werkt, zie je een stap **Designing theme** in de chat.

Flowstep bouwt het thema op basis van:

* Kleuren die je in je prompt noemt
* Kleuren in je [ontwerprichtlijnen](/nl/design-guidelines)
* Merkkleuren uit bijlagen en [links die je plakt](/nl/design-references#paste-a-url)
* Het product en de sfeer die je prompt beschrijft, wanneer er niets specifiekers is

Het thema krijgt een korte naam, een volledig palet voor zowel licht als donker, en een afrondingsstap. Het wordt opgeslagen in je organisatie onder **Themes** op Home. Het bestand gebruikt het thema voor elk scherm dat daarna wordt gegenereerd.

Zodra een bestand een thema heeft, ontwerpt Flowstep er niet zelfstandig nog een. Wil je een nieuw thema, kies dan opnieuw **Automatic** in het thememenu. De volgende generatie ontwerpt een nieuw thema, en het bestand gaat daarop over. Kan Flowstep geen thema ontwerpen, dan valt het bestand terug op een ingebouwd thema.

<Tip>
  Vermeld je merkkleuren in je eerste prompt, of stel ze in via je [ontwerprichtlijnen](/nl/design-guidelines) voordat je genereert. Het gegenereerde thema begint dan met die kleuren.
</Tip>

## Het thema van één scherm wijzigen

Zo pas je één scherm aan zonder de rest van het bestand te raken:

1. Selecteer het scherm op het canvas.
2. Klik in het menu boven het scherm op de knop **Theme**.
3. Kies een van de thema's van je organisatie of een ingebouwd thema, of wissel tussen **Light** en **Dark**.

Een wisseling van thema verft het scherm direct opnieuw. Wisselen tussen **Light** en **Dark** vraagt de AI om het scherm opnieuw te stylen, net als bij een [AI-bewerking](/nl/editing-designs). Het menu is niet beschikbaar terwijl een generatie loopt.

## Een thema bewerken

Open een thema via de sectie **Themes** op Home. De themaeditor toont een live voorbeeld van het thema, met **Theme settings** rechts. Gebruik de knoppen **Light** en **Dark** bovenaan om het voorbeeld te wisselen. Klik op de naam van het thema om het te hernoemen.

* **Colors**: elke kleurgroep heeft een kleurvak voor licht en een voor donker: **Primary**, **Secondary**, **Accent**, **Muted**, **Destructive**, **Background**, **Card**, **Popover**, **Border**, **Input**, **Ring**, **Charts** en **Sidebar**. Klik op een kleurvak om de kleuren ervan te bewerken, bijvoorbeeld de vul- en tekstkleur van een groep. Gebruik de kleurkiezer of een hexwaarde.
* **Radius**: kies een afrondingsstap (**Square**, **Slight**, **Balanced**, **Soft** of **Round**), of kies **Custom** en sleep **Base radius** om je eigen waarde in te stellen.

Je bewerkingen worden eerst als concept opgeslagen, zodat schermen niet veranderen terwijl je werkt. Als je klaar bent:

* Klik op **Publish** om elk scherm dat het thema gebruikt bij te werken. Flowstep bevestigt met "Published. Screens using this theme are updating." (Gepubliceerd. Schermen die dit thema gebruiken, worden bijgewerkt.)
* Klik op **Reset changes** om je niet-gepubliceerde wijzigingen te verwerpen. Schermen die het thema gebruiken, worden daardoor niet beïnvloed.

Om een thema te verwijderen, klik je onderaan **Theme settings** op **Delete theme**. Je kunt ook op het prullenbakpictogram naast het thema in de lijst **Themes** op Home klikken. Een verwijderd thema wordt niet meer aangeboden in thememenu's. Schermen die het al gebruiken, behouden hun uitstraling, dus er verandert niets op je canvas.

<Note>
  Iedereen in je organisatie behalve Guests (gasten) kan thema's bewerken en verwijderen.
</Note>

## Kleuren en hoeken koppelen aan je thema

Kleuren en hoeken kunnen verwijzen naar een themaversie in plaats van naar een vaste waarde. Een gekoppelde waarde volgt het thema van het scherm. Verandert het thema (een ander thema, een gepubliceerde bewerking of een wisseling tussen licht en donker), dan werken de gekoppelde kleuren en hoeken mee.

**Colors**: klik in het paneel **Fill** of **Border** op het kleurvak. Kies op het tabblad **Token** een token via zoeken, of kies er een uit de groepen **Theme**, **Base** of **Tailwind**. Gebruik het tabblad **Custom** voor een exacte kleur. Een gekoppelde kleur toont zijn tokennaam in het paneel, en je kunt de dekkracht nog steeds aanpassen.

**Corners**: klik in het paneel **Corners** op een hoekvoorbeeld. Kies op het tabblad **Token** een stap (bijvoorbeeld `md` of `lg`). Typ op het tabblad **Custom** een exacte waarde in pixels. Een gekoppelde hoek toont zijn tokennaam, en wanneer je de afronding van het thema wijzigt, wordt de hoek opnieuw afgerond.

Wil je een gekoppelde waarde weer vastzetten, klik dan op **Detach from token**. De kleur of hoek behoudt zijn huidige uitstraling, maar volgt het thema niet meer.

## Goed om te weten

* **Schermen behouden hun eigen thema**: elk scherm onthoudt zijn thema en weergave. Het wijzigen van het thema van het bestand heeft alleen effect op schermen die je hierna genereert. Gebruik het thememenu per scherm om bestaande schermen opnieuw te stylen.
* **Alleen gepubliceerde versies**: schermen tonen de gepubliceerde versie van een thema. Concepten zijn alleen zichtbaar in de themaeditor totdat je publiceert.
* **Tokenkoppelingen blijven behouden bij bewerkingen**: themakleuren die in schaduwen, filters en verlopen worden gebruikt, blijven gekoppeld aan het thema wanneer Flowstep een scherm bewerkt of opnieuw genereert.
* **Afrondingsstappen die niet meeschalen**: de tokens `none` en `full` voor hoeken zijn altijd respectievelijk vierkant en volledig rond, wat de afronding van het thema ook is.


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