---
title: "स्टाइलिंग"
description: "CSS सह ThunderPhone व्हॉइस विजेटचे स्वरूप सानुकूलित करा"
---

विजेट अंगभूत हलक्या आणि गडद थीमसह काचेसारख्या बारच्या स्वरूपात रेंडर होते. सानुकूलन तीन स्तरांवर उपलब्ध आहे: सामान्य पर्यायांसाठी प्रॉप्स, थीमिंगसाठी CSS कस्टम प्रॉपर्टीज आणि पूर्ण नियंत्रणासाठी CSS क्लास ओव्हरराइड्स.

<Note>
  हे स्टाइलिंग पर्याय `ThunderPhoneWidget` React कॉम्पोनंट आणि `ThunderPhone.mount()` CDN मेथडद्वारे रेंडर केलेल्या पूर्वनिर्मित विजेटला लागू होतात. तुम्हाला पूर्णपणे सानुकूल UI हवे असल्यास, त्याऐवजी [हेडलेस हुक](/mr/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` 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 क्लासेस

तुमच्या विद्यमान स्टाइल्सशी संघर्ष टाळण्यासाठी सर्व विजेट क्लासेसना `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 ओव्हरराइड्स पुरेसे नसल्यास, [हेडलेस हुक](/mr/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>