---
title: "Yeniden kullanılabilir stiller"
description: "Metin ve renk ayarlarını yeniden kullanılabilir stiller olarak kaydedin, herhangi bir öğeye uygulayın ve bunları kullanan tüm öğeleri tek seferde güncelleyin."
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes`

Metin ayarlarını veya bir dolguyu (renk, gradyan ya da arka plan görseli gibi) depolamak için bir stil oluşturun ve birden fazla ekrandaki öğelerde yeniden kullanın. Bir stili düzenlediğinizde, değişiklik o stili kullanan tüm öğeleri ve ekranları etkiler.

Her flow'un kendine ait bir stiller seti vardır.

**Styles** Styles panelini açarak flow stillerinizi oluşturun, görüntüleyin ve düzenleyin:

- **Metin stilleri**: Tipografi ayarları (yazı tipi, kalınlık, boyut).
- **Renk stilleri**: Renkler, degradeler ve görseller gibi dolgular. Tek bir renk stili, açık mod ve koyu mod için ayrı sürümler içerebilir.

## Metin stilleri \{#text-styles\}

:::link
Ana makale: [Metin içeriği](onboarding-text)
:::

Metin stilleri; font ailesi, ağırlık, boyut, satır yüksekliği ve harf aralığı gibi tipografi ayarlarını bir arada saklar. Her flow şablonu varsayılan ön ayarlarla birlikte gelir ve özel stiller oluşturabilirsiniz.

Metin stili oluşturmak için:

1. **Styles** Styles panelini açın.
2. Panel başlığında Create style **Create style** seçeneğine tıklayın.
3. **Type** alanını **Text** olarak ayarlayın, bir ad girin ve tipografi ayarlarını yapılandırın.
4. **Create** seçeneğine tıklayın.

Bir metin öğesinin mevcut tipografi ayarlarını yeni bir metin stili olarak kaydetmek için font seçicinin sekmeleri yanındaki Create text style simgesine tıklayın. Öğe bundan sonra yeni stili kullanır.

Bir metin stili uygulamak için bir metin öğesi seçin ve **Typography** bölümündeki font açılır menüsünden stili seçin.

Bir metin stilini düzenlemek için **Styles** panelindeki ilgili stile tıklayın, ayarlarını değiştirin ve **Save** düğmesine tıklayın.

## Renk stilleri \{#color-styles\}

Bir renk stili, kaydedilmiş bir [dolgu](builder-styling#fill) öğesidir: bir renk, bir gradyan, bir görsel, bir video ya da bunların kombinasyonu olabilir. [Koyu tema](#dark-mode) kullanıyorsanız, temaya özgü sürümlere sahip olabilir. Stil girişindeki sayı, o stili kullanan öğe ve ekran sayısını gösterir.

### Bir renk stili oluşturma \{#create-a-color-style\}

Bir renk stili oluşturmak için:

1. **Styles** Styles panelini açın.
2. Panel başlığında Create style **Create style** seçeneğine tıklayın.
3. **Type** alanını **Color** olarak ayarlayın ve bir ad girin.
4. Stili yapılandırın. Katmanın rengini veya [dolgu türünü](#edit-a-color-style) değiştirebilir ve üstüne [daha fazla katman](#multi-layer-styles) ekleyebilirsiniz.
5. **Save** seçeneğine tıklayın.

Bir dolgu katmanının veya rengin mevcut değerini bir stile dönüştürmek için swatch'ına tıklayın, ardından **Custom** ve **Styles** sekmelerin yanındaki Create color style simgesine tıklayın ve **Save**'e tıklayın. Dolgu katmanı veya renk artık bu stili kullanır.

### Renk stili düzenleme \{#edit-a-color-style\}

Bir renk stilini düzenlemek için:

1. **Styles** Styles panelini açın.
2. **Colors** sekmesini seçin.
3. Bir stil girişine tıklayın.
4. Her versiyon birden fazla [katman](#multi-layer-styles) içerebilir. Dolgu türüne göre katmanı ayarlamak için renk kutusuna tıklayın:
    - [Düz renk](#solid-colors)
    - [Gradyan](#gradients)
    - [Görsel veya video](#images-and-videos)

#### Düz renkler \{#solid-colors\}

1. Rengi ayarlayın: bir hex değeri girin veya renk kutusuna tıklayıp seçin.
2. Opaklığı kaydırıcıyla ayarlayın.
3. **Save** düğmesine tıklayın.

#### Gradyanlar \{#gradients\}

1. Gradient **Gradient** dolgu türünü seçin.
2. Durakları, durma renklerini ve **Direction** değerini ayarlayın.
3. **Save** düğmesine tıklayın.

:::tip
Arka plan görselinin üzerindeki metin öğelerini daha okunabilir hale getirmek için, metnin arkasındaki [görselin kenarını koyulaştırın](paywall-head-picture#tint-a-background). Görselin üzerine bir gradyan [katmanı](#multi-layer-styles) ekleyin. Gradyanı o kenardan opak bir duraklama noktasıyla başlatıp diğer kenardan şeffaf bir duraklama noktasıyla bitirin.
:::

#### Görseller ve videolar \{#images-and-videos\}

Bir Image veya Video öğesi, karanlık tema için farklı bir dosyaya sahip olamaz. Bunun yerine, bir kapsayıcı oluşturun ve [arka planını](paywall-dark-mode#recipe-add-an-image-that-changes-with-the-theme) bir renk stiline ayarlayın. Stilin her sürümünde bir görsel veya video katmanı oluşturun:

1. Image **Image** veya Video **Video** dolgu türünü seçin.
2. Alt araç çubuğunda seçili [yerel ayar](custom-media#localize-media) için kaynak dosyayı yükleyin. Zaten yüklenmiş bir dosya varsa **Replace** seçeneğine tıklayabilirsiniz.
3. **Save** seçeneğine tıklayın.

:::tip
Bir görseli veya videoyu renklendirmek için üzerine yarı saydam bir renk [katmanı](#multi-layer-styles) ekleyin.
:::

### Çok katmanlı stiller \{#multi-layer-styles\}

Bir renk stilinin her versiyonu birden fazla katman içerebilir. Çok katmanlı stilleri kullanarak, renklendirilmiş görseller gibi daha karmaşık görsel efektler oluşturabilirsiniz.

Bir katman eklemek için stil girişine tıklayın. Ardından **Properties**, **Light** veya **Dark** bölümünde Plus düğmesine tıklayın. Mevcut katmanların üstüne yeni bir katman eklenir. Katmanların sırasını değiştirmek için satırlarını sürükleyin. Yeni katmanı ayarlayın ve **Save** düğmesine tıklayın.

Her katman, stili uyguladığınız her yerde görünmez. Bazı katmanlar yalnızca stili belirli özelliklere veya öğelere uyguladığınızda görünür:

- **Dolgu (girişler ve seçiciler)**: Yalnızca alt katman. Diğer katmanlar yok sayılır.
- **Dolgu (diğer tüm öğeler)**: Her katman.
- **Kenarlık (girişler ve seçiciler)**: Yalnızca tek bir düz renk veya gradyan. Resim ve video katmanları yok sayılır.
- **Kenarlık (diğer tüm öğeler)**: Düz renkler ve gradyanlar. Resim ve video katmanları yok sayılır.
- **Metin rengi**: Yalnızca düz renk katmanları. Gradyan, resim ve video katmanları yok sayılır. Bir sürümde düz renk katmanı yoksa, o modda metnin rengi olmaz ve görünmez.
- **Simge, gölge ve diğer renkler**: Çok katmanlı stilleri desteklemez. Yalnızca tek bir katman stili ve düz renk uygulayabilirsiniz.

### Renk stili uygulama \{#apply-a-color-style\}

Bir öğeye renk stili uygulamak için dolgu katmanının, metin renginin, kenarlık renginin veya simge renginin renk kutucuğuna tıklayın. Statik değeri bir stille değiştirmek için **Styles** sekmesine tıklayıp istediğiniz stili seçin. İhtiyacınız olan değere sahip bir stil yoksa [mevcut değeri stil olarak kaydedin](#create-a-color-style).

Bir stili ekrandaki birçok öğeye aynı anda uygulamak için [AI Editor](flow-ai-editor)'a şöyle bir istek gönderin: `Apply the Card background style to all cards`. Stilleri ayarlamak ve tüm flow genelinde uygulamak için [flow-generator skill](flow-generator-skill)'ini kullanın.

Bir Image veya Video öğesine renk stili uygulayamazsınız, çünkü bu öğelerin dolgusu yoktur. Bunun yerine, bir container oluşturun ve [arka planını ayarlayın](paywall-dark-mode#recipe-add-an-image-that-changes-with-the-theme).

## Stilleri yönet \{#manage-styles\}

**Styles** Styles panelinde:

- Bir stili yeniden adlandırmak için girdisine tıklayın, **Name** alanını değiştirin ve **Save**'e tıklayın.
- Bir stili kopyalamak için girdisine sağ tıklayın ve **Duplicate** seçeneğini belirleyin.
- Bir stili silmek için girdisine tıklayın ve **Delete style**'a tıklayın. Öğeler tarafından kullanılan bir stili sildiğinizde, yerine geçecek stili seçin.
- Stillerin sırasını değiştirmek için girdilerini listede yukarı veya aşağı sürükleyin.
- Stilleri başka bir flow'a kopyalamak için girdilerini seçin (birden fazla seçmek için Shift tuşuna basarak tıklayın) ve ⌘C / Ctrl+C tuşlarına basın. Diğer flow'da aynı sekmeyi (**Text** veya **Colors**) açın ve ⌘V / Ctrl+V tuşlarına basın.

## Karanlık mod \{#dark-mode\}

:::link
Ana makale: [Karanlık mod](paywall-dark-mode)
:::

Bir renk stilinin karanlık mod için ayrı bir değeri olabilir. Kullanıcının cihazı karanlık moda ayarlandığında, flow bu değeri kullanır.

Karanlık değerleri kullanmak için flow'a [karanlık tema ekleyin](paywall-dark-mode#add-a-dark-theme). Ardından karanlık modda farklı görünmesi gereken her stilin [karanlık değerini değiştirin](paywall-dark-mode#configure-the-dark-theme).