---
title: "స్టైలింగ్"
description: "CSSతో ThunderPhone వాయిస్ విడ్జెట్ రూపాన్ని అనుకూలీకరించండి"
---

విడ్జెట్ అంతర్నిర్మిత లైట్ మరియు డార్క్ థీమ్‌లతో గ్లాస్‌మార్ఫిక్ బార్‌గా రెండర్ అవుతుంది. అనుకూలీకరణ మూడు స్థాయిల్లో అందుబాటులో ఉంది: సాధారణ ఎంపికల కోసం ప్రాప్స్, థీమింగ్ కోసం CSS కస్టమ్ ప్రాపర్టీలు, మరియు పూర్తి నియంత్రణ కోసం CSS క్లాస్ ఓవర్‌రైడ్‌లు.

<Note>
  ఈ స్టైలింగ్ ఎంపికలు `ThunderPhoneWidget` React కాంపొనెంట్ మరియు `ThunderPhone.mount()` CDN మెథడ్ ద్వారా రెండర్ అయ్యే ముందుగా రూపొందించిన విడ్జెట్‌కు వర్తిస్తాయి. మీకు పూర్తిగా అనుకూల UI అవసరమైతే, బదులుగా [హెడ్‌లెస్ హుక్](/te/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`ను ఉపయోగిస్తుంది). |

---

## ఉదాహరణలు

### ప్రాప్స్ ద్వారా అనుకూల యాక్సెంట్

విడ్జెట్‌కు బ్రాండింగ్ ఇవ్వడానికి అత్యంత సులభమైన మార్గం:

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

### CSS ద్వారా అనుకూల రంగులు

పూర్తి రంగు నియంత్రణ కోసం అనుకూల ప్రాపర్టీలను ఓవర్‌రైడ్ చేయండి. యాక్సెంట్ CSS నుండి కాకుండా `primaryColor` ప్రాప్ నుండి వస్తుందని గుర్తుంచుకోండి:

```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` ప్రాప్‌ను పంపండి:

```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` ప్రాప్ ద్వారా ప్రత్యేక యాక్సెంట్ ఇవ్వండి (CSS `--tp-accent`ను ఓవర్‌రైడ్ చేయలేదు -- ఇది ఇన్‌లైన్‌గా సెట్ చేయబడుతుంది).

---

## పూర్తిగా అనుకూల UI

CSS ఓవర్‌రైడ్‌లు సరిపోకపోతే, [హెడ్‌లెస్ హుక్](/te/widget/headless-hook) మీకు పూర్తి నియంత్రణను ఇస్తుంది. `useThunderPhone` వాయిస్ సెషన్‌ను నిర్వహిస్తుండగా, మీరు మొత్తం HTML మరియు స్టైలింగ్‌ను అందిస్తారు. వేవ్‌ఫార్మ్‌ల వంటి ఆడియో-ప్రతిస్పందన విజువలైజేషన్‌లను రూపొందించడానికి హుక్ `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>