---
title: "Stil"
description: "ThunderPhone sesli bileşeninin görünümünü CSS ile özelleştirin"
---

Widget, yerleşik açık ve koyu temalara sahip cam efektli bir çubuk olarak oluşturulur. Özelleştirme üç düzeyde yapılabilir: yaygın seçenekler için prop'lar, tema oluşturma için CSS özel özellikleri ve tam kontrol için CSS sınıf geçersiz kılmaları.

<Note>
  Bu stil seçenekleri, `ThunderPhoneWidget` React bileşeni ve `ThunderPhone.mount()` CDN yöntemi tarafından oluşturulan önceden hazırlanmış widget için geçerlidir. Tamamen özel bir kullanıcı arayüzüne ihtiyacınız varsa bunun yerine [headless hook'u](/tr/widget/headless-hook) kullanın.
</Note>

---

## Temalar

`theme` prop'u, widget'ın renk şemasını kontrol eder. Widget köküne `tp--light` veya `tp--dark` sınıfını uygular:

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
/>
```

| Tema | Sınıf | Açıklama |
|-------|-------|-------------|
| `'light'` | `tp--light` | Koyu metinli açık arka plan. Varsayılan. |
| `'dark'` | `tp--dark` | Açık metinli koyu arka plan. |

Her iki tema da arka plan bulanıklığı ve hafif saydamlık içeren cam efektli çubuk tasarımını kullanır.

---

## CSS Özel Özellikleri

Widget, tek tek sınıflara dokunmadan renkleri değiştirmek için geçersiz kılabileceğiniz CSS özel özelliklerini (değişkenlerini) sunar. Bunlar, `.tp-widget` köküne uygulanan tema sınıfı (`.tp--light` veya `.tp--dark`) tarafından tanımlanır:

| Özellik | Varsayılan (açık) | Varsayılan (koyu) | Açıklama |
|----------|-----------------|-----------------|-------------|
| `--tp-accent` | `#000` | `#fff` | Vurgu rengi: başlat düğmesi, dalga biçimi çubukları, bağlanma noktası, bağlı durum metni. `primaryColor` prop'u aracılığıyla **satır içi** olarak ayarlanır. |
| `--tp-bg` | `rgba(255, 255, 255, 0.82)` | `rgba(15, 15, 15, 0.85)` | Çubuk arka planı (yarı saydam; `--tp-glass` tarafından bulanıklaştırılır). |
| `--tp-surface` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.07)` | Sessize alma düğmesi arka planı. |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)` | `rgba(255, 255, 255, 0.12)` | Sessize alma düğmesinin üzerine gelindiğindeki arka planı. |
| `--tp-border` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.1)` | Çubuk ve düğme kenarlıkları. |
| `--tp-border-hover` | `rgba(0, 0, 0, 0.14)` | `rgba(255, 255, 255, 0.18)` | Üzerine gelindiğindeki kenarlık rengi. |
| `--tp-text` | `rgba(0, 0, 0, 0.88)` | `rgba(255, 255, 255, 0.95)` | Birincil metin (başlık, ajan adı). |
| `--tp-text-2` | `rgba(0, 0, 0, 0.5)` | `rgba(255, 255, 255, 0.55)` | İkincil metin (alt başlık, durum satırı, arama zamanlayıcısı). |
| `--tp-glass` | `blur(32px) saturate(180%)` | `blur(32px) saturate(180%)` | Çubuk üzerinde cam efektini oluşturan `backdrop-filter`. |
| `--tp-shadow` | üç katmanlı gölge yığını | üç katmanlı gölge yığını | Çubuğun `box-shadow` değeri (halka + yakın + uzak katmanlar). |
| `--tp-shadow-hover` | üç katmanlı gölge yığını | üç katmanlı gölge yığını | Üzerine gelindiğinde yükselme efekti için tanımlanmıştır; şu anda hiçbir kural tarafından uygulanmaz. |
| `--tp-glow` | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Çubuk gölgesine katman olarak eklenen iç üst vurgulama. |
| `--tp-connected` | `#059669` | `#34d399` | Bağlı durum göstergesi rengi (durum noktası). |
| `--tp-error` | `#dc2626` | `#fb7185` | Hata durumu metin rengi. |
| `--tp-end-bg` | `rgba(239, 68, 68, 0.08)` | `rgba(251, 113, 133, 0.12)` | Aramayı sonlandır düğmesi arka planı. |
| `--tp-end-color` | `#ef4444` | `#fb7185` | Aramayı sonlandır düğmesi simge rengi. |
| `--tp-end-border` | `rgba(239, 68, 68, 0.12)` | `rgba(251, 113, 133, 0.15)` | Aramayı sonlandır düğmesi kenarlığı. |
| `--tp-end-hover` | `rgba(239, 68, 68, 0.14)` | `rgba(251, 113, 133, 0.2)` | Aramayı sonlandır düğmesinin üzerine gelindiğindeki arka planı. |
| `--tp-idle-opacity` | `0.4` | `0.3` | Boşta durumunda karartma için tanımlanmıştır; şu anda hiçbir kural tarafından uygulanmaz. |

### Özel Özellikleri Geçersiz Kılma

Vurgu rengini `primaryColor` prop'u aracılığıyla ayarlayın:

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#e11d48"
/>
```

<Warning>
  `--tp-accent`, `primaryColor` prop'undan **satır içi stil** olarak ayarlanır; bu nedenle `--tp-accent` için stil sayfası geçersiz kılmaları etkili olmaz. Vurgu rengini prop ile değiştirin. Diğer tüm özel özellikler CSS'te geçersiz kılınabilir.
</Warning>

Diğer özel özellikleri CSS ile geçersiz kılın. Stil sayfası sırasından bağımsız olarak kuralınızın varsayılanları tanımlayan tema sınıfından daha yüksek önceliğe sahip olması için iki sınıflı bir seçici (`.tp-widget.tp--light` / `.tp-widget.tp--dark`) kullanın:

```css
.tp-widget.tp--light {
  --tp-bg: rgba(0, 0, 0, 0.9);
  --tp-text: rgba(255, 255, 255, 0.95);
  --tp-text-2: rgba(255, 255, 255, 0.55);
  --tp-border: rgba(255, 255, 255, 0.15);
}
```

---

## CSS Sınıfları

Mevcut stillerinizle çakışmaları önlemek için tüm widget sınıfları `tp-` ile başlar.

| Sınıf | Öğe | Açıklama |
|-------|---------|-------------|
| `.tp-widget` | Kök sarmalayıcı | Sabit konumlu kapsayıcı (`position: fixed`, köşe `position` prop'u tarafından ayarlanır, `z-index: 9999`). Tema sınıfını ve temel yazı tipi ayarlarını taşır; kendine ait görsel bir çerçevesi yoktur. |
| `.tp--light` / `.tp--dark` | Tema değiştiricileri | Temayla birlikte `.tp-widget` öğesine uygulanır; tüm `--tp-*` özel özelliklerini tanımlar. |
| `.tp-bar` | Çubuk | Cam görünümlü hap şeklinin kendisi: arka plan, arka plan bulanıklığı, kenarlık, `99px` yarıçap, gölge. `300px` genişliğindedir. |
| `.tp-meta` | Metin bloğu | Tüm metinlerin kapsayıcısıdır -- boşta başlık ve alt başlık, arama sırasında ajan adı ve durum. |
| `.tp-name` | Birincil etiket | Boştayken `title` prop'unu, arama sırasında ise bağlı yapay zeka ajanının adını (`title` yedek olarak kullanılır) gösterir. |
| `.tp-sub` | Alt başlık | Boştayken gösterilen "Şimdi kullanılabilir" satırı. |
| `.tp-start` | Boşta arama düğmesi | Dairesel vurgu renkli başlatma düğmesi (42px). Arka plan olarak `--tp-accent` kullanır. |
| `.tp-dot` | Bağlanma noktası | Bağlanırken çubuğun solunda gösterilen, titreşimli vurgu renkli nokta. |
| `.tp-wave` / `.tp-wave--idle` | Dalga formu | Beş çubuklu dalga formu. `--idle` yavaş nefes alma animasyonunu ekler; arama sırasında çubuklar sese duyarlıdır. |
| `.tp-button` | Arama sırasındaki düğmeler | Arama sırasındaki kontroller için temel stil (42px, yuvarlatılmış 12px). |
| `.tp-button-group` | Düğme satırı | Arama sırasında sessize alma ve sonlandırma düğmelerini sarar. |
| `.tp-button--start` | Bağlan düğmesi varyantı | Arama başlatılırken gösterilen vurgu renkli varyant. |
| `.tp-button--mute` | Sessize alma anahtarı | Arama sırasında mikrofonu sessize alır/sessizi kaldırır. `--tp-surface` kullanır. |
| `.tp-button--end` | Aramayı sonlandır düğmesi | Aramayı kapatır. `--tp-end-*` paletini kullanır. |
| `.tp-button--loading` | Yükleme değiştiricisi | Bağlanırken düğmeyi soluklaştırır. |
| `.tp-icon` / `.tp-spin` | Simgeler | Düğme simgesi boyutlandırması; `tp-spin` bağlanma yükleme simgesini canlandırır. |
| `.tp-status` | Arama sırasındaki durum bloğu | Bağlanıyor/bağlı/hata durumları sırasında durum satırını sarar. |
| `.tp-status__text` | Durum satırı | Bağlantı durumu metni (ör. "Bağlanıyor...") veya arama zamanlayıcısı. Duruma göre `.tp-status--connected` (vurgu rengi) ya da `.tp-status--error` (hata rengi) alır. |
| `.tp-status__name` | Ajan adı alanı | Durum bloğunun bir parçasıdır, ancak mevcut çubuk düzeninde görüntülenmez -- ajan adı bunun yerine `.tp-name` içinde görünür. |
| `.tp-status__dot` | Durum noktası | Titreşimli bağlı durum noktası stili (`--tp-connected` kullanır). |

---

## Örnekler

### Props ile Özel Vurgu Rengi

Widget'ı markanıza uyarlamanın en basit yolu:

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="light"
  primaryColor="#059669"
  title="Talk to support"
/>
```

### CSS ile Özel Renkler

Renkleri tamamen kontrol etmek için özel özellikleri geçersiz kılın. Vurgu renginin CSS'den değil, `primaryColor` prop'undan geldiğini unutmayın:

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#059669"
/>
```

```css
/* Emerald theme for everything else */
.tp-widget.tp--light {
  --tp-bg: rgba(236, 253, 245, 0.85);
  --tp-text: rgba(6, 78, 59, 0.95);
  --tp-text-2: rgba(4, 120, 87, 0.8);
  --tp-border: rgba(5, 150, 105, 0.2);
}
```

### Özel Boyut

Çubuk, düğme ve metin boyutlarını ayarlayarak widget'ı büyütün veya küçültün:

```css
/* Wider bar */
.tp-bar {
  width: 340px;
}

/* Larger buttons (42px by default) */
.tp-start,
.tp-button {
  width: 56px;
  height: 56px;
}

/* Larger text */
.tp-name {
  font-size: 16px;
}

.tp-sub,
.tp-status__text {
  font-size: 14px;
}
```

### Metin Etiketlerini Gizleme

Widget'taki tüm metinler `.tp-meta` içinde bulunur. Yalnızca dalga formunu ve düğmeleri bırakmak için bunu tamamen gizleyin:

```css
.tp-meta {
  display: none;
}
```

Ya da tek tek bölümleri gizleyin:

```css
/* Hide only the idle "Available now" subtitle */
.tp-sub {
  display: none;
}

/* Hide only the in-call status line (connection state / timer) */
.tp-status {
  display: none;
}
```

<Note>
  Boşta durum etiketi `.tp-name`/`.tp-sub` içinde bulunur, `.tp-status` içinde değil -- yalnızca `.tp-status` öğesini gizlemek, widget boşta olduğunda başlığı göstermeye devam eder.
</Note>

### Temaya Özgü Geçersiz Kılmalar

Tema sınıfıyla belirli bir temayı hedefleyin:

```css
/* Only affect dark theme */
.tp--dark .tp-start {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}

/* Only affect light theme */
.tp-widget.tp--light {
  --tp-bg: rgba(255, 255, 255, 0.95);
}
```

---

## className ile Kapsam Belirleme

React bileşenini kullanırken, geçersiz kılmalarınızı belirli bir widget örneğiyle sınırlamak için bir `className` prop'u geçirin:

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  className="support-widget"
/>
```

Ardından CSS'nizde bu sınıfı hedefleyin:

```css
.support-widget.tp--dark {
  --tp-bg: rgba(30, 30, 46, 0.9);
}

.support-widget .tp-name {
  font-weight: 700;
}
```

Bu sayede aynı sayfada farklı stillere sahip birden fazla widget örneği kullanabilirsiniz. Her örneğe `primaryColor` prop'u üzerinden kendi vurgu rengini verin (CSS, `--tp-accent` özelliğini geçersiz kılamaz -- bu özellik satır içi olarak ayarlanır).

---

## Tamamen Özel Arayüz

CSS geçersiz kılmaları yeterli değilse [headless hook](/tr/widget/headless-hook) size tam kontrol sağlar. Tüm HTML'yi ve stillendirmeyi siz sağlarken, `useThunderPhone` ses oturumunu yönetir. Hook ayrıca dalga formları gibi sese tepki veren görselleştirmeler oluşturmak için `audioLevelRef` sağlar.

```tsx
import { useThunderPhone } from '@thunderphone/widget'

function MyWidget() {
  const phone = useThunderPhone({
    publishableKey: 'pk_live_your_publishable_key',
  })

  return (
    <div className="my-totally-custom-widget">
      {/* Your own buttons, animations, layouts -- anything */}
      <button onClick={phone.state === 'connected' ? phone.disconnect : phone.connect}>
        {phone.state === 'connected' ? 'Hang up' : 'Call us'}
      </button>
      {phone.audio}
    </div>
  )
}
```

<Tip>
  Sese tepki veren animasyonlara, özel düzenlere veya mevcut bir bileşen kitaplığıyla entegrasyona ihtiyacınız olduğunda headless hook doğru seçimdir. Hızlı tema ayarlamaları için CSS geçersiz kılmaları ve özel özellikler daha uygundur.
</Tip>