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

# Använd teman för att hålla färger och hörnradier konsekventa över Flowstep-skärmar

> Välj eller generera ett tema för varje fil, anpassa enskilda skärmar, redigera din organisations teman och koppla färger och hörn till temattokens så att ändringar slår igenom på varje skärm.

Ett tema är en delad färgpalett och hörnradie för dina skärmar. Varje fil har ett tema och ett utseende (ljust eller mörkt), och skärmar stylas med temats tokens. Redigerar du ett tema följer varje skärm som använder det med, så att ditt team arbetar utifrån en uppsättning beslut i stället för att upprepa färger i varje prompt.

Teman du skapar eller genererar sparas i din organisation och visas under **Themes** på Home, så att alla filer i organisationen kan använda dem.

## Välj ett tema för en fil

Välj tema och utseende för nya skärmar i promptkomponeraren inuti en fil. Temaknappen finns inte i promptrutan på Home.

<Steps>
  <Step title="Öppna temamenyn">
    I promptkomponeraren klickar du på temaknappen — den visar det aktuella temats färgprov, eller ett färghjul när temat är **Automatic**. Menyn har rubriken **Theme for new screens**.
  </Step>

  <Step title="Välj ett tema">
    Välj **Automatic**, ett av din organisations teman (listas först) eller ett inbyggt tema: **Default**, **Blue**, **Grayscale**, **Green**, **Ice**, **Orange**, **Red**, **Rose**, **Violet** eller **Yellow**.
  </Step>

  <Step title="Välj ett utseende">
    Under **Appearance** väljer du **Light** eller **Dark**, eller **Automatic** för att låta Flowstep avgöra per skärm utifrån din prompt — "en mörk instrumentpanel" blir mörk.
  </Step>
</Steps>

<Note>
  Ditt val gäller för de skärmar du genererar härnäst. Skärmar som redan finns på canvasen behåller sitt utseende.
</Note>

## Låt Flowstep designa ett tema

När en fil ännu inte har något tema — en ny fil med temat kvar på **Automatic** — designar Flowstep ett anpassat tema tillsammans med de första skärmarna som genereras. Du ser ett steg **Designing theme** i chatten medan den arbetar.

Flowstep bygger temat utifrån:

* Färger du anger i din prompt
* Färger i dina [designriktlinjer](/sv/design-guidelines)
* Varumärkesfärger från bilagor och [länkar du klistrar in](/sv/design-references#paste-a-url)
* Produkten och stämningen som din prompt beskriver, när det inte finns något mer specifikt att gå på

Temat får ett kort namn, en komplett palett för både ljust och mörkt, och ett steg för hörnradie. Det sparas i din organisation under **Themes** på Home, och filen använder det för varje skärm som genereras därefter.

När en fil har ett tema designar Flowstep inte ett nytt på egen hand. För att få ett nytt tema väljer du **Automatic** igen i temamenyn — nästa generering designar ett nytt tema och filen övergår till det. Om Flowstep inte kan designa ett tema faller filen tillbaka på ett inbyggt tema.

<Tip>
  Nämn dina varumärkesfärger i din första prompt, eller ange dem i dina [designriktlinjer](/sv/design-guidelines) innan du genererar, så startar det genererade temat från dem.
</Tip>

## Ändra temat för en skärm

För att anpassa en enskild skärm utan att påverka resten av filen:

1. Markera skärmen på canvasen.
2. Klicka på knappen **Theme** i menyn ovanför skärmen.
3. Välj ett av din organisations teman eller ett inbyggt tema, eller växla mellan **Light** och **Dark**.

Att byta tema målar om skärmen direkt. Att växla mellan **Light** och **Dark** ber AI:n att omstila skärmen, precis som en [AI-redigering](/sv/editing-designs). Menyn är inte tillgänglig medan en generering körs.

## Redigera ett tema

Öppna ett tema från avsnittet **Themes** på Home. Temaredigeraren visar en förhandsvisning av temat i realtid, med **Theme settings** till höger. Använd knapparna **Light** och **Dark** högst upp för att växla förhandsvisningen, och klicka på temats namn för att byta namn på det.

* **Colors** — varje färggrupp har ett färgprov för ljust och ett för mörkt: **Primary**, **Secondary**, **Accent**, **Muted**, **Destructive**, **Background**, **Card**, **Popover**, **Border**, **Input**, **Ring**, **Charts** och **Sidebar**. Klicka på ett färgprov för att redigera dess färger — till exempel en grupps fyll- och textfärg — med färgväljaren eller ett hexvärde.
* **Radius** — välj ett steg för hörnradie (**Square**, **Slight**, **Balanced**, **Soft** eller **Round**), eller välj **Custom** och dra i **Base radius** för att ange ditt eget värde.

Dina ändringar sparas som ett utkast, så att skärmarna inte ändras medan du arbetar. När du är klar:

* Klicka på **Publish** för att uppdatera varje skärm som använder temat. Flowstep bekräftar med "Published. Screens using this theme are updating."
* Klicka på **Reset changes** för att kassera dina opublicerade ändringar. Skärmar som använder temat påverkas inte.

Om du vill ta bort ett tema klickar du på **Delete theme** längst ner under **Theme settings**, eller på papperskorgsikonen bredvid det i listan **Themes** på Home. Ett borttaget tema erbjuds inte längre i temamenyerna, men skärmar som redan använder det behåller sitt utseende, så inget på din canvas ändras.

<Note>
  Alla i din organisation utom Guests (gäster) kan redigera och ta bort teman.
</Note>

## Koppla färger och hörn till ditt tema

Färger och hörn kan peka på en temattoken i stället för ett fast värde. Ett kopplat värde följer skärmens tema, så när temat ändras — ett annat tema, en publicerad redigering eller en växling mellan ljust och mörkt — uppdateras kopplade färger och hörn med det.

**Colors** — klicka på färgprovet i panelen **Fill** eller **Border**. På fliken **Token** söker du efter eller väljer en token från grupperna **Theme**, **Base** eller **Tailwind**. Använd fliken **Custom** för en exakt färg. En kopplad färg visar sitt tokennamn i panelen, och du kan fortfarande justera dess opacitet.

**Corners** — klicka på en hörnförhandsvisning i panelen **Corners**. På fliken **Token** väljer du ett steg (till exempel `md` eller `lg`); på fliken **Custom** skriver du ett exakt värde i pixlar. Ett kopplat hörn visar sitt tokennamn, och när temats avrundning ändras avrundas det om.

Om du vill göra ett kopplat värde fast igen klickar du på **Detach from token**. Färgen eller hörnet behåller sitt nuvarande utseende men följer inte längre temat.

## Bra att veta

* **Skärmar behåller sitt eget tema** — varje skärm minns sitt tema och utseende. Att ändra filens tema påverkar bara skärmar du genererar härnäst. Använd menyn **Theme** för varje skärm för att anpassa befintliga.
* **Endast publicerade versioner** — skärmar visar temats publicerade version. Utkast syns bara i temaredigeraren tills du publicerar.
* **Tokenkopplingar består vid redigering** — temafärger som används i skuggor, filter och gradienter förblir kopplade till temat när Flowstep redigerar eller genererar om en skärm.
* **Avrundningssteg som inte påverkas av temat** — hörntokens `none` och `full` är alltid helt kantiga respektive helt runda, oavsett temats avrundning.


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