---
title: "स्टाइलिंग"
description: "CSS के साथ ThunderPhone वॉइस विजेट का रूप कस्टमाइज़ करें"
---

विजेट अंतर्निहित लाइट और डार्क थीम के साथ ग्लासमॉर्फिक बार के रूप में रेंडर होता है। कस्टमाइज़ेशन तीन स्तरों पर उपलब्ध है: सामान्य विकल्पों के लिए प्रॉप्स, थीमिंग के लिए CSS कस्टम प्रॉपर्टीज़, और पूर्ण नियंत्रण के लिए CSS क्लास ओवरराइड्स।

<Note>
  ये स्टाइलिंग विकल्प `ThunderPhoneWidget` React कंपोनेंट और `ThunderPhone.mount()` CDN मेथड द्वारा रेंडर किए गए पहले से निर्मित विजेट पर लागू होते हैं। यदि आपको पूरी तरह कस्टम UI चाहिए, तो इसके बजाय [हेडलेस हुक](/hi/widget/headless-hook) का उपयोग करें।
</Note>

---

## थीम

`theme` प्रॉप विजेट की रंग स्कीम नियंत्रित करता है। यह विजेट रूट पर `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` प्रॉप से **इनलाइन** सेट किया जाता है। |
| `--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` प्रॉप के माध्यम से एक्सेंट रंग सेट करें:

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

<Warning>
  `--tp-accent` को `primaryColor` प्रॉप से **इनलाइन स्टाइल** के रूप में सेट किया जाता है, इसलिए `--tp-accent` के स्टाइलशीट ओवरराइड का कोई प्रभाव नहीं होता। प्रॉप से एक्सेंट बदलें। अन्य सभी कस्टम प्रॉपर्टीज़ को 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 क्लासेस

मौजूदा स्टाइल्स के साथ टकराव से बचने के लिए सभी विजेट क्लासेस में `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 के ज़रिए कस्टम रंग

पूरे रंग नियंत्रण के लिए कस्टम प्रॉपर्टीज़ ओवरराइड करें। याद रखें कि एक्सेंट CSS से नहीं, `primaryColor` prop से आता है:

```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 ओवरराइड पर्याप्त नहीं हैं, तो [हेडलेस हुक](/hi/widget/headless-hook) आपको पूरा नियंत्रण देता है। आप सभी HTML और स्टाइलिंग प्रदान करते हैं, जबकि `useThunderPhone` वॉइस सेशन संभालता है। यह हुक वेवफॉर्म जैसे ऑडियो-रिएक्टिव विज़ुअलाइज़ेशन बनाने के लिए `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>
  जब आपको ऑडियो-रिएक्टिव एनिमेशन, कस्टम लेआउट या किसी मौजूदा कंपोनेंट लाइब्रेरी में इंटीग्रेशन चाहिए, तब हेडलेस हुक सही विकल्प है। त्वरित थीमिंग समायोजनों के लिए CSS ओवरराइड और कस्टम प्रॉपर्टीज़ बेहतर हैं।
</Tip>