樣式設定

小工具會呈現為配備內建淺色及深色主題的玻璃擬態橫條。你可從三個層級自訂：適用於常用選項的屬性、用於主題設定的 CSS 自訂屬性，以及可提供完整控制權的 CSS 類別覆寫。

主題

theme 屬性可控制小工具的配色方案。它會將 tp--light 或 tp--dark 類別套用至小工具根元素：

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
/>

兩種主題均採用具備背景模糊效果及細緻透明度的玻璃擬態橫條設計。

CSS 自訂屬性

此小工具提供可覆寫的 CSS 自訂屬性（變數），讓你毋須修改個別類別即可變更顏色。這些屬性由套用至 .tp-widget 根元素的主題類別（.tp--light 或 .tp--dark）定義：

覆寫自訂屬性

透過 primaryColor prop 設定強調色：

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#e11d48"
/>

使用 CSS 覆寫其他自訂屬性。使用雙類別選擇器（.tp-widget.tp--light / .tp-widget.tp--dark），確保無論樣式表載入次序如何，你的規則都會比定義預設值的主題類別具有更高優先度：

.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- 為前綴，避免與你現有的樣式衝突。

範例

透過 Props 自訂強調色

為小工具加入品牌風格的最簡單方法：

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

透過 CSS 自訂顏色

覆寫自訂屬性，以全面控制顏色。請記住，強調色來自 primaryColor prop，而非 CSS：

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#059669"
/>

/* 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);
}

自訂尺寸

調整列、按鈕及文字尺寸，令小工具變大或變小：

/* 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。如要只保留波形及按鈕，可將其完全隱藏：

.tp-meta {
  display: none;
}

或者隱藏個別部分：

/* 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;
}

特定主題覆寫

使用主題 class 針對特定主題：

/* 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，將覆寫設定套用至特定小工具實例：

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  className="support-widget"
/>

然後在 CSS 中針對該 class 設定樣式：

.support-widget.tp--dark {
  --tp-bg: rgba(30, 30, 46, 0.9);
}

.support-widget .tp-name {
  font-weight: 700;
}

這讓你可在同一頁面使用多個不同樣式的小工具實例。透過各實例的 primaryColor prop 設定專屬強調色（CSS 無法覆寫 --tp-accent——此屬性以 inline 方式設定）。

完全自訂 UI

如果 CSS 覆寫不足夠，無介面 hook 可讓你全面控制。你可提供所有 HTML 及樣式，而 useThunderPhone 負責處理語音工作階段。此 hook 亦提供 audioLevelRef，讓你建立波形等會因應音訊變化的視覺效果。

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>
  )
}