Skip to main content
Tema, ekranlarınız için paylaşılan bir renk paleti ve köşe yuvarlaklığıdır. Her dosyanın bir teması ve bir görünümü (açık veya koyu) vardır. Ekranlar temanın belirteçleriyle biçimlendirilir. Bir temayı düzenlediğinizde, onu kullanan her ekran buna uyar. Böylece ekibiniz her istemde renkleri yeniden belirtmek yerine tek bir karar setiyle çalışır. Oluşturduğunuz veya ürettiğiniz temalar organizasyonunuza kaydedilir ve Home sayfasında Themes altında listelenir. Böylece organizasyondaki herhangi bir dosya bunları kullanabilir.

Bir dosya için tema seçin

Yeni ekranlar için temayı ve görünümü, bir dosyanın içindeki istem oluşturucudan seçin. Tema düğmesi, Home sayfasındaki istem kutusunda kullanılamaz.
1

Tema menüsünü açın

İstem oluşturucuda tema düğmesine tıklayın. Düğme, geçerli temanın renk örneğini gösterir. Tema Automatic olduğunda ise bir renk çarkı gösterir. Menünün başlığı Theme for new screens olur.
2

Bir tema seçin

Automatic seçin, organizasyonunuzun temalarından birini seçin (ilk sırada listelenir) ya da yerleşik bir tema seçin: Default, Blue, Grayscale, Green, Ice, Orange, Red, Rose, Violet veya Yellow.
3

Bir görünüm seçin

Appearance altında Light veya Dark seçin. Ya da Flowstep’in her ekranı isteminize göre belirlemesi için Automatic seçin. Örneğin “koyu bir gösterge paneli” koyu olarak çıkar.
Seçiminiz, bir sonra oluşturacağınız ekranlara uygulanır. Tuvaldeki mevcut ekranlar görünümünü korur.

Flowstep’in bir tema tasarlamasına izin verin

Bir dosyanın henüz teması yoksa, yani tema Automatic bırakılmış yeni bir dosyaysa, Flowstep ilk oluşturduğu ekranlarla birlikte özel bir tema tasarlar. Çalışırken sohbette bir Designing theme adımı görürsünüz. Flowstep temayı şunlardan oluşturur: Tema kısa bir ad, hem açık hem koyu için tam bir palet ve bir yuvarlaklık adımı alır. Organizasyonunuza, Home sayfasında Themes altına kaydedilir. Dosya, bundan sonra oluşturulan her ekran için bu temayı kullanır. Bir dosyanın teması olduktan sonra Flowstep kendi başına bir tane daha tasarlamaz. Yeni bir tema almak için tema menüsünde yeniden Automatic seçin. Bir sonraki oluşturma yeni bir tema tasarlar ve dosya ona geçer. Flowstep tema tasarlayamazsa dosya yerleşik bir temaya geri döner.
İlk isteminizde marka renklerinizi belirtin. Ya da oluşturmadan önce bunları tasarım yönergelerinizde ayarlayın. Oluşturulan tema bu renklerden başlar.

Tek bir ekranın temasını değiştirin

Dosyanın geri kalanına dokunmadan tek bir ekranı yeniden biçimlendirmek için:
  1. Tuvalde ekranı seçin.
  2. Ekranın üstündeki menüde Theme düğmesine tıklayın.
  3. Organizasyonunuzun temalarından birini ya da yerleşik bir temayı seçin veya Light ile Dark arasında geçiş yapın.
Temayı değiştirmek ekranı anında yeniden boyar. Light ile Dark arasında geçiş yapmak, Flowstep’ten ekranı yeniden biçimlendirmesini ister. Bu, bir yapay zekâ düzenlemesi ile aynıdır. Bir oluşturma çalışırken menü kullanılamaz.

Bir temayı düzenleyin

Home sayfasındaki Themes bölümünden bir temayı açın. Tema düzenleyicisi temanın canlı önizlemesini ve sağda Theme settings panelini gösterir. Önizlemeyi değiştirmek için üstteki Light ve Dark düğmelerini kullanın. Temanın adına tıklayarak adını değiştirebilirsiniz.
  • Colors — her renk grubunun açık için bir, koyu için bir renk örneği vardır: Primary, Secondary, Accent, Muted, Destructive, Background, Card, Popover, Border, Input, Ring, Charts ve Sidebar. Düzenlemek için bir örneğe tıklayın. Örneğin bir grubun dolgu ve metin renklerini renk seçiciyle veya hex değeriyle değiştirebilirsiniz.
  • Radius — bir yuvarlaklık adımı seçin (Square, Slight, Balanced, Soft veya Round). Ya da Custom seçip kendi değerinizi belirlemek için Base radius değerini sürükleyin.
Düzenlemeleriniz taslak olarak kaydedilir. Böylece siz çalışırken ekranlar değişmez. Hazır olduğunuzda:
  • Temayı kullanan her ekranı güncellemek için Publish düğmesine tıklayın. Flowstep, “Published. Screens using this theme are updating.” (Yayımlandı. Bu temayı kullanan ekranlar güncelleniyor.) mesajıyla onaylar.
  • Yayımlanmamış değişikliklerinizi silmek için Reset changes düğmesine tıklayın. Temayı kullanan ekranlar etkilenmez.
Bir temayı kaldırmak için Theme settings panelinin altındaki Delete theme düğmesine tıklayın. Ya da Home sayfasındaki Themes listesinde temanın yanındaki çöp kutusu simgesine tıklayın. Silinen bir tema artık tema menülerinde sunulmaz. Onu zaten kullanan ekranlar görünümlerini korur, bu nedenle tuvalinizdeki hiçbir şey değişmez.
Organizasyondaki Guest (misafir) dışındaki herkes temaları düzenleyebilir ve silebilir.

Renkleri ve köşeleri temanıza bağlayın

Renkler ve köşeler, sabit bir değer yerine bir tema belirtecine işaret edebilir. Bağlı bir değer ekranın temasını izler. Bu nedenle tema değiştiğinde (farklı bir tema, yayımlanmış bir düzenleme veya açık ile koyu arasında geçiş) bağlı renkler ve köşeler de onunla birlikte güncellenir. Colors: Fill veya Border panelinde renk örneğine tıklayın. Token sekmesinde Theme, Base veya Tailwind gruplarından bir belirteci arayın veya seçin. Tam bir renk istiyorsanız Custom sekmesini kullanın. Bağlı bir renk, panelde belirteç adını gösterir. Yine de opaklığını ayarlayabilirsiniz. Corners: Corners panelinde bir köşe önizlemesine tıklayın. Token sekmesinde bir adım seçin (örneğin md veya lg). Custom sekmesinde piksel cinsinden tam bir değer yazın. Bağlı bir köşe belirteç adını gösterir. Temanın yuvarlaklığını değiştirirseniz köşe de yeniden yuvarlanır. Bağlı bir değeri sabit bir değere geri döndürmek için Detach from token düğmesine tıklayın. Renk veya köşe mevcut görünümünü korur, ancak artık temayı izlemez.

İyi bilmeniz gerekenler

  • Ekranlar kendi temalarını korur: Her ekran temasını ve görünümünü hatırlar. Dosyanın temasını değiştirmek yalnızca bir sonra oluşturacağınız ekranları etkiler. Mevcut ekranları yeniden biçimlendirmek için ekran başına Theme menüsünü kullanın.
  • Yalnızca yayımlanmış sürümler: Ekranlar bir temanın yayımlanmış sürümünü gösterir. Taslaklar, siz yayımlayana kadar yalnızca tema düzenleyicisinde görünür.
  • Belirteç bağlantıları düzenlemelerden sonra da kalır: Gölgelerde, filtrelerde ve gradyanlarda kullanılan tema renkleri, Flowstep bir ekranı düzenlediğinde veya yeniden oluşturduğunda temaya bağlı kalır.
  • Ölçeklenmeyen yuvarlaklık adımları: none ve full köşe belirteçleri, temanın yuvarlaklığı ne olursa olsun her zaman sırasıyla kare ve tamamen yuvarlaktır.