---
title: "ਸਟਾਈਲਿੰਗ"
description: "CSS ਨਾਲ ThunderPhone ਵੌਇਸ ਵਿਜੇਟ ਦੀ ਦਿੱਖ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰੋ"
---

ਵਿਜਿਟ ਬਿਲਟ-ਇਨ ਹਲਕੇ ਅਤੇ ਗੂੜ੍ਹੇ ਥੀਮਾਂ ਵਾਲੀ ਗਲਾਸਮੌਰਫਿਕ ਬਾਰ ਵਜੋਂ ਰੈਂਡਰ ਹੁੰਦਾ ਹੈ। ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਤਿੰਨ ਪੱਧਰਾਂ 'ਤੇ ਉਪਲਬਧ ਹੈ: ਆਮ ਵਿਕਲਪਾਂ ਲਈ props, ਥੀਮਿੰਗ ਲਈ CSS ਕਸਟਮ ਪ੍ਰਾਪਰਟੀਜ਼, ਅਤੇ ਪੂਰੇ ਨਿਯੰਤਰਣ ਲਈ CSS ਕਲਾਸ ਓਵਰਰਾਈਡਜ਼।

<Note>
  ਇਹ ਸਟਾਈਲਿੰਗ ਵਿਕਲਪ `ThunderPhoneWidget` React ਕੰਪੋਨੈਂਟ ਅਤੇ `ThunderPhone.mount()` CDN ਮੈਥਡ ਦੁਆਰਾ ਰੈਂਡਰ ਕੀਤੇ ਪਹਿਲਾਂ ਤੋਂ ਬਣੇ ਵਿਜਿਟ 'ਤੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ। ਜੇ ਤੁਹਾਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਸਟਮ UI ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਇਸਦੀ ਬਜਾਏ [ਹੈਡਲੈੱਸ ਹੁੱਕ](/pa/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` ਪ੍ਰੌਪ ਤੋਂ **ਇਨਲਾਈਨ** ਸੈੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। |
| `--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 ਰਾਹੀਂ ਕਸਟਮ ਰੰਗ

ਪੂਰੇ ਰੰਗ ਨਿਯੰਤਰਣ ਲਈ ਕਸਟਮ ਪ੍ਰਾਪਰਟੀਜ਼ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰੋ। ਯਾਦ ਰੱਖੋ ਕਿ ਐਕਸੈਂਟ `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 ਓਵਰਰਾਈਡ ਕਾਫ਼ੀ ਨਹੀਂ ਹਨ, ਤਾਂ [ਹੈੱਡਲੈੱਸ ਹੁੱਕ](/pa/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>