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

# Käytä teemoja pitämään värit ja kulmien pyöristys yhtenäisinä Flowstep-näytöissä

> Valitse tai luo teema jokaiselle tiedostolle, muokkaa yksittäisten näyttöjen teemaa, muokkaa organisaatiosi teemoja ja linkitä värit ja kulmat teematunnuksiin, jotta muutokset etenevät jokaiseen näyttöön.

Teema on yhteinen väripaletti ja kulmien pyöristys näytöillesi. Jokaisella tiedostolla on teema ja ulkoasu (vaalea tai tumma), ja näyttöjen tyylit määräytyvät teeman tunnusten mukaan. Kun muokkaat teemaa, jokainen sitä käyttävä näyttö päivittyy. Tiimisi työskentelee siis yhden päätöskokonaisuuden kanssa eikä kirjoita värejä jokaiseen kehotteeseen erikseen.

Teemat, jotka luot tai generoit, tallennetaan organisaatioosi, ja ne näkyvät **Themes**-osiossa Homessa. Näin mikä tahansa organisaation tiedosto voi käyttää niitä.

## Valitse tiedostolle teema

Valitse teema ja ulkoasu uusille näytöille tiedoston kehotteen kirjoittimesta. Teemapainike ei ole käytettävissä kehotekentässä Homessa.

<Steps>
  <Step title="Avaa teemavalikko">
    Napsauta kehotteen kirjoittimessa teemapainiketta. Se näyttää nykyisen teeman värinäytteen tai värikehän, kun teema on **Automatic** (automaattinen). Valikon otsikko on **Theme for new screens**.
  </Step>

  <Step title="Valitse teema">
    Valitse **Automatic**, yksi organisaatiosi teemoista (luetellaan ensimmäisenä) tai sisäänrakennettu teema: **Default**, **Blue**, **Grayscale**, **Green**, **Ice**, **Orange**, **Red**, **Rose**, **Violet** tai **Yellow**.
  </Step>

  <Step title="Valitse ulkoasu">
    Valitse kohdassa **Appearance** joko **Light** tai **Dark**, tai **Automatic**, jolloin Flowstep päättää kunkin näytön ulkoasun kehotteestasi. Esimerkiksi "tumma kojelauta" tulee tummana.
  </Step>
</Steps>

<Note>
  Valintasi koskee seuraavaksi luomiasi näyttöjä. Piirtoalustalla jo olevat näytöt säilyttävät ulkoasunsa.
</Note>

## Anna Flowstepin suunnitella teema

Kun tiedostolla ei ole vielä teemaa (uusi tiedosto, jonka teema on jätetty **Automatic**-tilaan), Flowstep suunnittelee mukautetun teeman ensimmäisten generoitujen näyttöjen rinnalla. Näet chatissa **Designing theme** -vaiheen, kun se työskentelee.

Flowstep rakentaa teeman seuraavien perusteella:

* Kehotteessasi nimeämäsi värit
* Värit [suunnitteluohjeissasi](/fi/design-guidelines)
* Brändivärit liitteistä ja [linkeistä, jotka liität](/fi/design-references#paste-a-url)
* Tuote ja tunnelma, jota kehotteesi kuvaa, kun siitä ei ole tarkempaa tietoa

Teemalle annetaan lyhyt nimi, täysi paletti sekä vaaleaa että tummaa varten ja pyöristysaste. Se tallennetaan organisaatioosi **Themes**-osioon Homessa, ja tiedosto käyttää sitä jokaiseen sen jälkeen generoituun näyttöön.

Kun tiedostolla on teema, Flowstep ei suunnittele toista omin päin. Saadaksesi uuden teeman valitse **Automatic** uudelleen teemavalikosta. Seuraava generointi suunnittelee uuden teeman, ja tiedosto ottaa sen käyttöön. Jos Flowstep ei pysty suunnittelemaan teemaa, tiedosto käyttää sisäänrakennettua teemaa.

<Tip>
  Mainitse brändivärisi ensimmäisessä kehotteessasi tai aseta ne [suunnitteluohjeisiin](/fi/design-guidelines) ennen generointia, niin luotu teema lähtee niistä liikkeelle.
</Tip>

## Muuta yksittäisen näytön teemaa

Muokataksesi yhden näytön tyyliä koskematta muuhun tiedostoon:

1. Valitse näyttö piirtoalustalta.
2. Napsauta näytön yläpuolella olevassa valikossa **Theme**-painiketta.
3. Valitse yksi organisaatiosi teemoista tai sisäänrakennettu teema, tai vaihda **Light**- ja **Dark**-tilan välillä.

Teeman vaihtaminen päivittää näytön välittömästi. **Light**- ja **Dark**-tilan vaihtaminen pyytää tekoälyä tyylittelemään näytön uudelleen, samoin kuin [AI-muokkaus](/fi/editing-designs). Valikko ei ole käytettävissä, kun generointi on käynnissä.

## Muokkaa teemaa

Avaa teema Homen **Themes**-osiosta. Teemaeditori näyttää teemasta reaaliaikaisen esikatselun, ja **Theme settings** on oikealla. Käytä yläreunan **Light**- ja **Dark**-painikkeita esikatselun vaihtamiseen ja napsauta teeman nimeä nimetäksesi sen uudelleen.

* **Colors** – jokaisella värilohkolla on värinäyte vaaleaa ja tummaa varten: **Primary**, **Secondary**, **Accent**, **Muted**, **Destructive**, **Background**, **Card**, **Popover**, **Border**, **Input**, **Ring**, **Charts** ja **Sidebar**. Napsauta värinäytettä muokataksesi sen värejä, esimerkiksi ryhmän täyttö- ja tekstivärejä. Käytä värinvalitsinta tai heksadesimaaliarvoa.
* **Radius** – valitse pyöristysaste (**Square**, **Slight**, **Balanced**, **Soft** tai **Round**) tai valitse **Custom** ja vedä **Base radius** -liukusäädintä asettaaksesi oman arvosi.

Muokkauksesi tallentuvat luonnoksena, joten näytöt eivät muutu kesken työn. Kun olet valmis:

* Napsauta **Publish** päivittääksesi jokaisen teemaa käyttävän näytön. Flowstep vahvistaa viestillä "Published. Screens using this theme are updating." (Julkaistu. Tätä teemaa käyttävät näytöt päivittyvät.)
* Napsauta **Reset changes** hylätäksesi julkaisemattomat muutokset. Teemaa käyttävät näytöt eivät vaikuta.

Poistaaksesi teeman napsauta **Delete theme** -painiketta **Theme settings**-paneelin alareunassa tai **Themes**-luettelon vieressä olevaa roskakorikuvaketta Homessa. Poistettua teemaa ei enää tarjota teemavalikoissa. Sitä jo käyttävät näytöt säilyttävät kuitenkin ulkoasunsa, joten piirtoalustasi ei muutu.

<Note>
  Kaikki organisaatiosi jäsenet paitsi Guest-käyttäjät (vieraat) voivat muokata ja poistaa teemoja.
</Note>

## Linkitä värit ja kulmat teemaan

Värit ja kulmat voivat viitata teematunnukseen kiinteän arvon sijaan. Linkitetty arvo seuraa näytön teemaa. Kun teema muuttuu, esimerkiksi eri teeman, julkaistun muokkauksen tai vaalean ja tumman vaihdon myötä, linkitetyt värit ja kulmat päivittyvät sen mukana.

**Colors** – napsauta **Fill**- tai **Border**-paneelissa värinäytettä. Valitse **Token**-välilehdeltä tunnus hakemalla tai valitsemalla se ryhmistä **Theme**, **Base** tai **Tailwind**. Käytä **Custom**-välilehteä tarkan värin valintaan. Linkitetty väri näyttää tunnuksensa nimen paneelissa, ja voit silti säätää sen läpinäkyvyyttä.

**Corners** – napsauta **Corners**-paneelissa kulman esikatselua. Valitse **Token**-välilehdeltä askel (esimerkiksi `md` tai `lg`). Kirjoita **Custom**-välilehdellä tarkka arvo pikseleinä. Linkitetty kulma näyttää tunnuksensa nimen, ja teeman pyöristyksen muuttaminen pyöristää sen uudelleen.

Muuttaaksesi linkitetyn arvon takaisin kiinteäksi, napsauta **Detach from token**. Väri tai kulma säilyttää nykyisen ulkoasunsa, mutta ei enää seuraa teemaa.

## Hyvä tietää

* **Näytöt säilyttävät oman teemansa** – jokainen näyttö muistaa teemansa ja ulkoasunsa. Tiedoston teeman vaihtaminen vaikuttaa vain seuraavaksi generoitaviin näyttöihin. Muokkaa olemassa olevia näyttöjä näytön omasta **Theme**-valikosta.
* **Vain julkaistut versiot** – näytöt näyttävät teeman julkaistun version. Luonnokset näkyvät vain teemaeditorissa, kunnes julkaiset ne.
* **Tunnuslinkit säilyvät muokkauksissa** – varjoissa, suodattimissa ja liukuvärjäyksissä käytetyt teemavärit pysyvät linkitettyinä teemaan, kun Flowstep muokkaa tai generoi näytön uudelleen.
* **Pyöristysaskeleet, jotka eivät skaalaudu** – `none`- ja `full`-kulmatunnukset ovat aina neliömäisiä ja täysin pyöreitä teeman pyöristyksestä riippumatta.


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