---
title: "স্টাইলিং"
description: "CSS দিয়ে ThunderPhone ভয়েস উইজেটের চেহারা কাস্টমাইজ করুন"
---

উইজেটটি বিল্ট-ইন হালকা ও গাঢ় থিমসহ একটি গ্লাসমরফিক বার হিসেবে রেন্ডার হয়। তিনটি স্তরে কাস্টমাইজেশন উপলভ্য: সাধারণ বিকল্পের জন্য props, থিমিংয়ের জন্য CSS কাস্টম প্রপার্টি এবং সম্পূর্ণ নিয়ন্ত্রণের জন্য CSS ক্লাস ওভাররাইড।

<Note>
  এই স্টাইলিং বিকল্পগুলো `ThunderPhoneWidget` React কম্পোনেন্ট এবং `ThunderPhone.mount()` CDN মেথড দ্বারা রেন্ডার করা পূর্বনির্মিত উইজেটে প্রযোজ্য। সম্পূর্ণ কাস্টম UI প্রয়োজন হলে, পরিবর্তে [হেডলেস হুক](/bn/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` prop থেকে **inline** হিসেবে সেট করা হয়। |
| `--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 থেকে একটি **inline স্টাইল** হিসেবে সেট করা হয়, তাই `--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 ওভাররাইড যথেষ্ট না হলে, [হেডলেস হুক](/bn/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>