---
title: "اسٹائلنگ"
description: "CSS کے ذریعے ThunderPhone وائس ویجیٹ کی ظاہری شکل کو حسبِ ضرورت بنائیں"
---

ویجیٹ بلٹ اِن ہلکے اور گہرے تھیمز کے ساتھ شیشہ نما بار کے طور پر رینڈر ہوتا ہے۔ تخصیص تین سطحوں پر دستیاب ہے: عام اختیارات کے لیے props، تھیم سازی کے لیے CSS کسٹم پراپرٹیز، اور مکمل کنٹرول کے لیے CSS کلاس اوور رائیڈز۔

<Note>
  یہ اسٹائلنگ اختیارات `ThunderPhoneWidget` React کمپوننٹ اور `ThunderPhone.mount()` CDN میتھڈ کے ذریعے رینڈر کیے گئے پہلے سے تیار شدہ ویجیٹ پر لاگو ہوتے ہیں۔ اگر آپ کو مکمل طور پر کسٹم UI درکار ہو تو اس کے بجائے [ہیڈ لیس ہک](/ur/widget/headless-hook) استعمال کریں۔
</Note>

---

## تھیمز

`theme` prop ویجیٹ کی رنگ اسکیم کو کنٹرول کرتا ہے۔ یہ ویجیٹ روٹ پر `tp--light` یا `tp--dark` کلاس لاگو کرتا ہے:

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

| تھیم | کلاس | وضاحت |
|-------|-------|-------------|
| `'light'` | `tp--light` | گہرے متن کے ساتھ ہلکا پس منظر۔ ڈیفالٹ۔ |
| `'dark'` | `tp--dark` | ہلکے متن کے ساتھ گہرا پس منظر۔ |

دونوں تھیمز بیک ڈراپ بلر اور ہلکی شفافیت کے ساتھ شیشہ نما بار ڈیزائن استعمال کرتے ہیں۔

---

## CSS حسب ضرورت خصوصیات

ویجیٹ CSS حسب ضرورت خصوصیات (ویری ایبلز) فراہم کرتا ہے جنہیں آپ انفرادی کلاسز کو تبدیل کیے بغیر رنگ تبدیل کرنے کے لیے اووررائیڈ کر سکتے ہیں۔ یہ `.tp-widget` روٹ پر لاگو تھیم کلاس (`.tp--light` یا `.tp--dark`) کے ذریعے متعین ہوتی ہیں:

| خصوصیت | ڈیفالٹ (لائٹ) | ڈیفالٹ (ڈارک) | وضاحت |
|----------|-----------------|-----------------|-------------|
| `--tp-accent` | `#000` | `#fff` | نمایاں رنگ: اسٹارٹ بٹن، ویوفارم بارز، کنیکٹ ہونے کا ڈاٹ، کنیکٹڈ اسٹیٹس کا متن۔ `primaryColor` prop سے **ان لائن** سیٹ کیا جاتا ہے۔ |
| `--tp-bg` | `rgba(255, 255, 255, 0.82)` | `rgba(15, 15, 15, 0.85)` | بار کا پس منظر (نیم شفاف؛ `--tp-glass` سے بلر کیا جاتا ہے)۔ |
| `--tp-surface` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.07)` | میوٹ بٹن کا پس منظر۔ |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)` | `rgba(255, 255, 255, 0.12)` | میوٹ بٹن کا ہوور پس منظر۔ |
| `--tp-border` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.1)` | بار اور بٹن کی بارڈرز۔ |
| `--tp-border-hover` | `rgba(0, 0, 0, 0.14)` | `rgba(255, 255, 255, 0.18)` | ہوور پر بارڈر کا رنگ۔ |
| `--tp-text` | `rgba(0, 0, 0, 0.88)` | `rgba(255, 255, 255, 0.95)` | بنیادی متن (عنوان، ایجنٹ کا نام)۔ |
| `--tp-text-2` | `rgba(0, 0, 0, 0.5)` | `rgba(255, 255, 255, 0.55)` | ثانوی متن (ذیلی عنوان، اسٹیٹس لائن، کال ٹائمر)۔ |
| `--tp-glass` | `blur(32px) saturate(180%)` | `blur(32px) saturate(180%)` | `backdrop-filter` جو بار پر گلاس کا اثر پیدا کرتا ہے۔ |
| `--tp-shadow` | تین تہوں والا شیڈو اسٹیک | تین تہوں والا شیڈو اسٹیک | بار کا `box-shadow` (رنگ + قریب + دور کی تہیں)۔ |
| `--tp-shadow-hover` | تین تہوں والا شیڈو اسٹیک | تین تہوں والا شیڈو اسٹیک | ہوور ایلیویشن کے لیے متعین؛ فی الحال کسی اصول کے ذریعے لاگو نہیں ہوتا۔ |
| `--tp-glow` | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | بار کے شیڈو پر شامل کی گئی اندرونی اوپری ہائی لائٹ۔ |
| `--tp-connected` | `#059669` | `#34d399` | کنیکٹڈ حالت کے انڈیکیٹر کا رنگ (اسٹیٹس ڈاٹ)۔ |
| `--tp-error` | `#dc2626` | `#fb7185` | خرابی کی حالت کے اسٹیٹس متن کا رنگ۔ |
| `--tp-end-bg` | `rgba(239, 68, 68, 0.08)` | `rgba(251, 113, 133, 0.12)` | کال ختم کرنے کے بٹن کا پس منظر۔ |
| `--tp-end-color` | `#ef4444` | `#fb7185` | کال ختم کرنے کے بٹن کے آئیکن کا رنگ۔ |
| `--tp-end-border` | `rgba(239, 68, 68, 0.12)` | `rgba(251, 113, 133, 0.15)` | کال ختم کرنے کے بٹن کی بارڈر۔ |
| `--tp-end-hover` | `rgba(239, 68, 68, 0.14)` | `rgba(251, 113, 133, 0.2)` | کال ختم کرنے کے بٹن کا ہوور پس منظر۔ |
| `--tp-idle-opacity` | `0.4` | `0.3` | غیر فعال حالت میں مدھم کرنے کے لیے متعین؛ فی الحال کسی اصول کے ذریعے لاگو نہیں ہوتا۔ |

### حسب ضرورت خصوصیات کو اووررائیڈ کرنا

نمایاں رنگ کو `primaryColor` prop کے ذریعے سیٹ کریں:

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

<Warning>
  `--tp-accent` کو `primaryColor` prop سے **ان لائن اسٹائل** کے طور پر سیٹ کیا جاتا ہے، اس لیے `--tp-accent` کے اسٹائل شیٹ اووررائیڈز کا کوئی اثر نہیں ہوتا۔ نمایاں رنگ کو prop سے تبدیل کریں۔ باقی تمام حسب ضرورت خصوصیات کو CSS میں اووررائیڈ کیا جا سکتا ہے۔
</Warning>

دیگر حسب ضرورت خصوصیات کو CSS کے ذریعے اووررائیڈ کریں۔ دو کلاسز والا سلیکٹر (`.tp-widget.tp--light` / `.tp-widget.tp--dark`) استعمال کریں تاکہ آپ کا اصول ڈیفالٹس متعین کرنے والی تھیم کلاس پر غالب رہے، چاہے اسٹائل شیٹ کی ترتیب کچھ بھی ہو:

```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 کلاسز

آپ کے موجودہ اسٹائلز کے ساتھ تنازعات سے بچنے کے لیے تمام widget کلاسز کے آغاز میں `tp-` ہوتا ہے۔

| کلاس | عنصر | وضاحت |
|-------|---------|-------------|
| `.tp-widget` | بنیادی ریپر | مقررہ پوزیشن والا کنٹینر (`position: fixed`، کونا `position` prop کے ذریعے مقرر ہوتا ہے، `z-index: 9999`)۔ تھیم کلاس اور بنیادی فونٹ سیٹنگز رکھتا ہے؛ خود اس کی کوئی بصری آرائش نہیں ہوتی۔ |
| `.tp--light` / `.tp--dark` | تھیم موڈیفائرز | تھیم کے ساتھ `.tp-widget` پر لاگو ہوتے ہیں؛ تمام `--tp-*` کسٹم پراپرٹیز متعین کرتے ہیں۔ |
| `.tp-bar` | بار | خود گلاس مورفک پِل: پس منظر، بیک ڈراپ بلر، بارڈر، `99px` ریڈیس، شیڈو۔ چوڑائی `300px` ہے۔ |
| `.tp-meta` | ٹیکسٹ بلاک | تمام متن کا کنٹینر -- غیر فعال حالت میں عنوان اور ذیلی عنوان، اور کال کے دوران ایجنٹ کا نام اور اسٹیٹس۔ |
| `.tp-name` | بنیادی لیبل | غیر فعال حالت میں `title` prop دکھاتا ہے، اور کال کے دوران منسلک ایجنٹ کا نام دکھاتا ہے (`title` کو متبادل کے طور پر استعمال کرتے ہوئے)۔ |
| `.tp-sub` | ذیلی عنوان | غیر فعال حالت میں دکھائی جانے والی "ابھی دستیاب" لائن۔ |
| `.tp-start` | غیر فعال کال بٹن | گول نمایاں اسٹارٹ بٹن (42px)۔ پس منظر کے طور پر `--tp-accent` استعمال کرتا ہے۔ |
| `.tp-dot` | کنیکٹنگ ڈاٹ | کنیکٹ ہوتے وقت بار کے بائیں جانب دکھائی دینے والا دھڑکتا نمایاں ڈاٹ۔ |
| `.tp-wave` / `.tp-wave--idle` | ویوفارم | پانچ بارز والا ویوفارم۔ `--idle` سست سانس جیسی اینیمیشن شامل کرتا ہے؛ کال کے دوران بارز آڈیو کے مطابق ردعمل دیتے ہیں۔ |
| `.tp-button` | کال کے دوران بٹنز | کال کے دوران کنٹرولز کے لیے بنیادی اسٹائل (42px، گول 12px)۔ |
| `.tp-button-group` | بٹن قطار | کال کے دوران میوٹ اور اختتامی بٹنز کو سمیٹتا ہے۔ |
| `.tp-button--start` | کنیکٹ بٹن کی قسم | کال شروع ہوتے وقت دکھائی جانے والی نمایاں رنگ کی قسم۔ |
| `.tp-button--mute` | میوٹ ٹوگل | کال کے دوران مائیک کو میوٹ یا ان میوٹ کرتا ہے۔ `--tp-surface` استعمال کرتا ہے۔ |
| `.tp-button--end` | کال ختم کرنے کا بٹن | کال منقطع کرتا ہے۔ `--tp-end-*` پیلیٹ استعمال کرتا ہے۔ |
| `.tp-button--loading` | لوڈنگ موڈیفائر | کنیکٹ ہوتے وقت بٹن کو مدھم کرتا ہے۔ |
| `.tp-icon` / `.tp-spin` | آئیکنز | بٹن آئیکن کا سائز؛ `tp-spin` کنیکٹنگ اسپنر کو اینیمیٹ کرتا ہے۔ |
| `.tp-status` | کال کے دوران اسٹیٹس بلاک | کنیکٹ ہونے/منسلک/خرابی کی حالتوں کے دوران اسٹیٹس لائن کو سمیٹتا ہے۔ |
| `.tp-status__text` | اسٹیٹس لائن | کنکشن حالت کا متن (مثلاً، "کنیکٹ ہو رہا ہے...") یا کال ٹائمر۔ حالت کے مطابق `.tp-status--connected` (نمایاں رنگ) یا `.tp-status--error` (خرابی کا رنگ) حاصل کرتا ہے۔ |
| `.tp-status__name` | ایجنٹ نام کی جگہ | اسٹیٹس بلاک کا حصہ ہے، لیکن موجودہ بار لے آؤٹ میں رینڈر نہیں ہوتا -- اس کے بجائے ایجنٹ کا نام `.tp-name` میں ظاہر ہوتا ہے۔ |
| `.tp-status__dot` | اسٹیٹس ڈاٹ | دھڑکتے ہوئے منسلک حالت کے ڈاٹ کا اسٹائل (`--tp-connected` استعمال کرتا ہے)۔ |

---

## مثالیں

### Props کے ذریعے حسب ضرورت ایکسنٹ

ویجیٹ کو برانڈ کرنے کا سب سے آسان طریقہ:

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

### CSS کے ذریعے حسب ضرورت رنگ

مکمل رنگ کنٹرول کے لیے حسب ضرورت خصوصیات کو اووررائیڈ کریں۔ یاد رکھیں کہ ایکسنٹ `primaryColor` prop سے آتا ہے، CSS سے نہیں:

```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);
}
```

### حسب ضرورت سائز

بار، بٹن اور متن کے ابعاد ایڈجسٹ کر کے ویجیٹ کو بڑا یا چھوٹا بنائیں:

```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;
}
```

### متنی لیبلز چھپائیں

ویجیٹ کا تمام متن `.tp-meta` میں موجود ہے۔ صرف ویوفارم اور بٹن رکھنے کے لیے اسے مکمل طور پر چھپائیں:

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

یا انفرادی حصے چھپائیں:

```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>
  غیر فعال حالت کا لیبل `.tp-name`/`.tp-sub` میں موجود ہوتا ہے، `.tp-status` میں نہیں -- صرف `.tp-status` کو چھپانے سے ویجیٹ کے غیر فعال ہونے پر عنوان پھر بھی دکھائی دیتا ہے۔
</Note>

### تھیم کے لیے مخصوص اووررائیڈز

تھیم کلاس کے ذریعے کسی مخصوص تھیم کو ہدف بنائیں:

```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 کے ساتھ اسکوپنگ

React کمپوننٹ استعمال کرتے وقت، اپنی اووررائیڈز کو کسی مخصوص ویجیٹ انسٹینس تک محدود کرنے کے لیے `className` prop دیں:

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

پھر اپنی CSS میں اس کلاس کو ہدف بنائیں:

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

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

اس سے آپ ایک ہی صفحے پر مختلف اسٹائلز کے ساتھ ویجیٹ کے متعدد انسٹینس رکھ سکتے ہیں۔ ہر انسٹینس کو اس کے `primaryColor` prop کے ذریعے اپنا ایکسنٹ دیں (CSS `--tp-accent` کو اووررائیڈ نہیں کر سکتی -- یہ ان لائن سیٹ ہوتا ہے)۔

---

## مکمل حسب ضرورت UI

اگر CSS اووررائیڈز کافی نہ ہوں تو [ہیڈ لیس hook](/ur/widget/headless-hook) آپ کو مکمل کنٹرول دیتا ہے۔ آپ تمام HTML اور اسٹائلنگ فراہم کرتے ہیں جبکہ `useThunderPhone` وائس سیشن کو سنبھالتا ہے۔ یہ hook ویوفارمز جیسی آڈیو-ری ایکٹو ویژولائزیشنز بنانے کے لیے `audioLevelRef` بھی فراہم کرتا ہے۔

```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>
  جب آپ کو آڈیو-ری ایکٹو اینیمیشنز، حسب ضرورت لے آؤٹس، یا موجودہ کمپوننٹ لائبریری میں انضمام درکار ہو تو ہیڈ لیس hook درست انتخاب ہے۔ فوری تھیمنگ ایڈجسٹمنٹس کے لیے CSS اووررائیڈز اور حسب ضرورت خصوصیات بہتر ہیں۔
</Tip>