---
title: "સ્ટાઇલિંગ"
description: "CSS વડે ThunderPhone વૉઇસ વિજેટનો દેખાવ કસ્ટમાઇઝ કરો"
---

વિજેટ બિલ્ટ-ઇન લાઇટ અને ડાર્ક થીમ્સ સાથે ગ્લાસમોર્ફિક બાર તરીકે રેન્ડર થાય છે. કસ્ટમાઇઝેશન ત્રણ સ્તરે ઉપલબ્ધ છે: સામાન્ય વિકલ્પો માટે પ્રોપ્સ, થીમિંગ માટે CSS કસ્ટમ પ્રોપર્ટીઝ અને સંપૂર્ણ નિયંત્રણ માટે CSS ક્લાસ ઓવરરાઇડ્સ.

<Note>
  આ સ્ટાઇલિંગ વિકલ્પો `ThunderPhoneWidget` React કોમ્પોનેન્ટ અને `ThunderPhone.mount()` CDN મેથડ દ્વારા રેન્ડર થતા પૂર્વ-નિર્મિત વિજેટ પર લાગુ પડે છે. જો તમને સંપૂર્ણપણે કસ્ટમ UIની જરૂર હોય, તો તેના બદલે [હેડલેસ હૂક](/gu/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 ઓવરરાઇડ્સ પૂરતા ન હોય, તો [હેડલેસ હુક](/gu/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>