---
title: "ಶೈಲೀಕರಣ"
description: "CSS ಬಳಸಿ ThunderPhone ಧ್ವನಿ ವಿಜೆಟ್‌ನ ರೂಪವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ"
---

ವಿಜೆಟ್ ಅಂತರ್ನಿರ್ಮಿತ ಲೈಟ್ ಮತ್ತು ಡಾರ್ಕ್ ಥೀಮ್‌ಗಳೊಂದಿಗೆ ಗ್ಲಾಸ್‌ಮಾರ್ಫಿಕ್ ಬಾರ್‌ನಂತೆ ರೆಂಡರ್ ಆಗುತ್ತದೆ. ಕಸ್ಟಮೈಸೇಶನ್ ಮೂರು ಹಂತಗಳಲ್ಲಿ ಲಭ್ಯವಿದೆ: ಸಾಮಾನ್ಯ ಆಯ್ಕೆಗಳಿಗಾಗಿ ಪ್ರಾಪ್‌ಗಳು, ಥೀಮಿಂಗ್‌ಗಾಗಿ CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು ಮತ್ತು ಸಂಪೂರ್ಣ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ CSS ಕ್ಲಾಸ್ ಓವರ್‌ರೈಡ್‌ಗಳು.

<Note>
  ಈ ಸ್ಟೈಲಿಂಗ್ ಆಯ್ಕೆಗಳು `ThunderPhoneWidget` React ಕಾಂಪೊನೆಂಟ್ ಮತ್ತು `ThunderPhone.mount()` CDN ಮೆತಡ್ ಮೂಲಕ ರೆಂಡರ್ ಆಗುವ ಪೂರ್ವನಿರ್ಮಿತ ವಿಜೆಟ್‌ಗೆ ಅನ್ವಯಿಸುತ್ತವೆ. ನಿಮಗೆ ಸಂಪೂರ್ಣ ಕಸ್ಟಮ್ UI ಬೇಕಿದ್ದರೆ, ಬದಲಿಗೆ [ಹೆಡ್‌ಲೆಸ್ ಹುಕ್](/kn/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` ಪ್ರಾಪ್ ನಿರ್ಧರಿಸುತ್ತದೆ, `z-index: 9999`). ಥೀಮ್ ವರ್ಗ ಮತ್ತು ಮೂಲ ಫಾಂಟ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ; ಸ್ವಂತ ದೃಶ್ಯ ಅಲಂಕಾರ ಇರುವುದಿಲ್ಲ. |
| `.tp--light` / `.tp--dark` | ಥೀಮ್ ಮಾರ್ಪಡಿಸುವಿಕೆಗಳು | ಥೀಮ್ ಜೊತೆಗೆ `.tp-widget` ಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ; ಎಲ್ಲಾ `--tp-*` ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. |
| `.tp-bar` | ಪಟ್ಟಿ | ಗ್ಲಾಸ್‌ಮಾರ್ಫಿಕ್ ಪಿಲ್ ಸ್ವತಃ: ಹಿನ್ನೆಲೆ, ಬ್ಯಾಕ್‌ಡ್ರಾಪ್ ಬ್ಲರ್, ಅಂಚು, `99px` ತ್ರಿಜ್ಯ, ನೆರಳು. `300px` ಅಗಲ. |
| `.tp-meta` | ಪಠ್ಯ ಬ್ಲಾಕ್ | ಎಲ್ಲಾ ಪಠ್ಯಕ್ಕಾಗಿ ಕಂಟೇನರ್ -- ನಿಷ್ಕ್ರಿಯವಾಗಿರುವಾಗ ಶೀರ್ಷಿಕೆ ಮತ್ತು ಉಪಶೀರ್ಷಿಕೆ, ಕರೆಯ ಸಮಯದಲ್ಲಿ ಏಜೆಂಟ್ ಹೆಸರು ಮತ್ತು ಸ್ಥಿತಿ. |
| `.tp-name` | ಪ್ರಾಥಮಿಕ ಲೇಬಲ್ | ನಿಷ್ಕ್ರಿಯವಾಗಿರುವಾಗ `title` ಪ್ರಾಪ್ ಅನ್ನು ಮತ್ತು ಕರೆಯ ಸಮಯದಲ್ಲಿ ಸಂಪರ್ಕಿತ ಏಜೆಂಟ್‌ನ ಹೆಸರನ್ನು (ಲಭ್ಯವಿಲ್ಲದಿದ್ದರೆ `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 ಓವರ್‌ರೈಡ್‌ಗಳು ಸಾಕಾಗದಿದ್ದರೆ, [ಹೆಡ್‌ಲೆಸ್ ಹೂಕ್](/kn/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>