Témák használata a színek és a sarokkerekítések egységesen tartásához a Flowstep-képernyőkön

A téma egy megosztott színpaletta és sarokkerekítés a képernyőidhez. Minden fájlnak van témája és megjelenése (világos vagy sötét), a képernyők pedig a téma tokenjeivel vannak stilizálva. Ha szerkeszted a témát, minden azt használó képernyő követi a változást, így a csapatod egy közös döntéshalmazon dolgozik, és nem kell minden promptban újra megadni a színeket. A létrehozott vagy generált témák a szervezetedhez mentődnek, és a Home oldalon a Themes alatt jelennek meg, így a szervezet bármely fájlja használhatja őket.

​

Téma kiválasztása egy fájlhoz

Az új képernyők témáját és megjelenését a fájlon belüli prompt-szerkesztőben választhatod ki. A téma gomb nem érhető el a Home oldali promptdobozban.

​

Hagyd, hogy a Flowstep tervezze meg a témát

Ha a fájlnak még nincs témája – például egy új fájlnál, ahol a téma Automatic marad –, a Flowstep az első generált képernyőkkel együtt egyedi témát tervez. A csevegésben látni fogod a Designing theme lépést, amíg dolgozik. A Flowstep a témát a következőkből építi fel:

• A promptodban megnevezett színek
• A tervezési irányelveidben szereplő színek
• A csatolmányokból és a beillesztett linkekből származó márkaszínek
• A prompt által leírt termék és hangulat, ha nincs más konkrétum

A téma rövid nevet, teljes palettát világos és sötét módhoz, valamint egy kerekítési lépést kap. A szervezeted Themes részébe kerül a Home oldalon, a fájl pedig minden ezután generált képernyőhöz ezt használja. Ha a fájlnak már van témája, a Flowstep nem tervez másikat magától. Új téma kéréséhez válaszd újra az Automatic lehetőséget a téma menüben – a következő generálás új témát tervez, és a fájl ahhoz igazodik. Ha a Flowstep nem tud témát tervezni, a fájl egy beépített témára vált vissza.

​

Egy képernyő témájának megváltoztatása

Ha egyetlen képernyő stílusát szeretnéd átállítani anélkül, hogy a fájl többi részéhez nyúlnál:

1. Jelöld ki a képernyőt a vásznon.
2. A képernyő felett lévő menüben kattints a Theme gombra.
3. Válassz a szervezeted egyik témája vagy egy beépített téma közül, vagy válts a Light és a Dark között.

A téma váltása azonnal újrafesti a képernyőt. A Light és a Dark közötti váltás arra kéri az AI-t, hogy alakítsa át a képernyő stílusát, ugyanúgy, mint egy AI-szerkesztés. A menü nem érhető el, amíg generálás fut.

​

Téma szerkesztése

Nyiss meg egy témát a Home oldal Themes részéből. A témaszerkesztő a téma élő előnézetét mutatja, jobb oldalon a Theme settings panellel. A tetején lévő Light és Dark gombokkal válthatsz az előnézet között, a téma nevére kattintva pedig átnevezheted.

• Colors – minden színcsoportnak van egy mintája a világos és egy a sötét módhoz: Primary, Secondary, Accent, Muted, Destructive, Background, Card, Popover, Border, Input, Ring, Charts és Sidebar. Kattints egy mintára a színek szerkesztéséhez – például a csoport kitöltő- és szövegszínének – a színválasztóval vagy hexadecimális értékkel.
• Radius – válassz egy kerekítési lépést (Square, Slight, Balanced, Soft vagy Round), vagy válaszd a Custom lehetőséget, és húzd a Base radius csúszkát a saját értékedhez.

A szerkesztéseid piszkozatként mentődnek, így a képernyők nem változnak, amíg dolgozol. Ha kész vagy:

• Kattints a Publish gombra, hogy frissítsd az összes képernyőt, amely a témát használja. A Flowstep ezt megerősíti: “Published. Screens using this theme are updating.” (Magyarul: „Közzétéve. A témát használó képernyők frissülnek.”)
• Kattints a Reset changes gombra, hogy elvesd a nem közzétett változtatásaidat. A témát használó képernyőket ez nem érinti.

Téma törléséhez kattints a Theme settings alján lévő Delete theme gombra, vagy a Home oldal Themes listájában a mellette lévő kukásikonra. A törölt téma már nem jelenik meg a téma menükben, de a már használó képernyők megtartják a megjelenésüket, így a vásznon semmi sem változik.

​

Színek és sarkok kötése a témához

A színek és a sarkok fix érték helyett téma-tokenre mutathatnak. A kötött érték követi a képernyő témáját, így ha a téma változik – másik téma, közzétett szerkesztés vagy váltás világos és sötét között –, a kötött színek és sarkok is vele együtt változnak. Colors – a Fill vagy a Border panelen kattints a színmintára. A Token fülön keress vagy válassz egy tokent a Theme, a Base vagy a Tailwind csoportokból. Pontos színhez használd a Custom fület. A kötött szín a panelen megjeleníti a token nevét, és az átlátszóságát továbbra is módosíthatod. Corners – a Corners panelen kattints egy sarokelőnézetre. A Token fülön válassz egy lépést (például md vagy lg); a Custom fülön pixelben add meg a pontos értéket. A kötött sarok megjeleníti a token nevét, és a téma kerekítésének módosításakor vele együtt változik. Ha egy kötött értéket újra fixre szeretnél állítani, kattints a Detach from token gombra. A szín vagy sarok megtartja a jelenlegi megjelenését, de már nem követi a témát.

​

Jó tudni

• A képernyők megtartják a saját témájukat – minden képernyő emlékszik a témájára és megjelenésére. A fájl témájának módosítása csak a következőkben generált képernyőkre hat; a meglévők átstílusozásához használd a képernyőnkénti Theme menüt.
• Csak a közzétett verziók – a képernyők a téma közzétett verzióját mutatják. A piszkozatok csak a témaszerkesztőben látszanak, amíg nem teszed közzé őket.
• A token-kötések szerkesztés után is megmaradnak – az árnyékokban, szűrőkben és átmenetekben használt témaszínek a témához kötve maradnak, amikor a Flowstep szerkeszt vagy újragenerál egy képernyőt.
• A nem skálázódó kerekítési lépések – a none és a full sarok-tokenek a téma kerekítésétől függetlenül mindig négyzetesek, illetve teljesen kerekek.