> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Stilsättning

> Anpassa utseendet på ThunderPhones röstwidget med CSS

Widgeten renderas som en glassmorfisk stapel med inbyggda ljusa och mörka teman. Anpassning är möjlig på tre nivåer: props för vanliga alternativ, anpassade CSS-egenskaper för teman och åsidosättningar av CSS-klasser för full kontroll.

<Note>
  Dessa stilalternativ gäller den förbyggda widgeten som renderas av React-komponenten `ThunderPhoneWidget` och CDN-metoden `ThunderPhone.mount()`. Om du behöver ett helt anpassat användargränssnitt använder du i stället [headless-hooken](/sv/widget/headless-hook).
</Note>

***

## Teman

Propen `theme` styr widgetens färgschema. Den tillämpar klassen `tp--light` eller `tp--dark` på widgetens rotelement:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
/>
```

| Tema      | Klass       | Beskrivning                            |
| --------- | ----------- | -------------------------------------- |
| `'light'` | `tp--light` | Ljus bakgrund med mörk text. Standard. |
| `'dark'`  | `tp--dark`  | Mörk bakgrund med ljus text.           |

Båda teman använder den glassmorfiska stapeldesignen med oskärpa i bakgrunden och diskret transparens.

## Anpassade CSS-egenskaper

Widgeten exponerar anpassade CSS-egenskaper (variabler) som du kan åsidosätta för att ändra färger utan att röra enskilda klasser. De definieras av temaklassen (`.tp--light` eller `.tp--dark`) som tillämpas på roten `.tp-widget`:

| Egenskap             | Standard (ljust)                        | Standard (mörkt)                         | Beskrivning                                                                                                                       |
| -------------------- | --------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `--tp-accent`        | `#000`                                  | `#fff`                                   | Accentfärg: startknapp, vågformsstaplar, anslutningspunkt, text för ansluten status. Anges **inline** från propen `primaryColor`. |
| `--tp-bg`            | `rgba(255, 255, 255, 0.82)`             | `rgba(15, 15, 15, 0.85)`                 | Bakgrund för fältet (halvgenomskinlig; suddas ut av `--tp-glass`).                                                                |
| `--tp-surface`       | `rgba(0, 0, 0, 0.04)`                   | `rgba(255, 255, 255, 0.07)`              | Bakgrund för avstängningsknappen.                                                                                                 |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)`                   | `rgba(255, 255, 255, 0.12)`              | Bakgrund för avstängningsknappen vid hovring.                                                                                     |
| `--tp-border`        | `rgba(0, 0, 0, 0.08)`                   | `rgba(255, 255, 255, 0.1)`               | Kanter för fält och knappar.                                                                                                      |
| `--tp-border-hover`  | `rgba(0, 0, 0, 0.14)`                   | `rgba(255, 255, 255, 0.18)`              | Kantfärg vid hovring.                                                                                                             |
| `--tp-text`          | `rgba(0, 0, 0, 0.88)`                   | `rgba(255, 255, 255, 0.95)`              | Primär text (titel, agentnamn).                                                                                                   |
| `--tp-text-2`        | `rgba(0, 0, 0, 0.5)`                    | `rgba(255, 255, 255, 0.55)`              | Sekundär text (undertitel, statusrad, samtalstimer).                                                                              |
| `--tp-glass`         | `blur(32px) saturate(180%)`             | `blur(32px) saturate(180%)`              | `backdrop-filter` som skapar glaseffekten på fältet.                                                                              |
| `--tp-shadow`        | skuggstapel i tre lager                 | skuggstapel i tre lager                  | Fältets `box-shadow` (ring + nära + avlägsna lager).                                                                              |
| `--tp-shadow-hover`  | skuggstapel i tre lager                 | skuggstapel i tre lager                  | Deklarerad för upphöjning vid hovring; tillämpas för närvarande inte av någon regel.                                              |
| `--tp-glow`          | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Inre högdagrar upptill som läggs ovanpå fältets skugga.                                                                           |
| `--tp-connected`     | `#059669`                               | `#34d399`                                | Färg för indikator vid anslutet läge (statuspunkt).                                                                               |
| `--tp-error`         | `#dc2626`                               | `#fb7185`                                | Textfärg för felstatus.                                                                                                           |
| `--tp-end-bg`        | `rgba(239, 68, 68, 0.08)`               | `rgba(251, 113, 133, 0.12)`              | Bakgrund för knappen för att avsluta samtal.                                                                                      |
| `--tp-end-color`     | `#ef4444`                               | `#fb7185`                                | Ikonfärg för knappen för att avsluta samtal.                                                                                      |
| `--tp-end-border`    | `rgba(239, 68, 68, 0.12)`               | `rgba(251, 113, 133, 0.15)`              | Kant för knappen för att avsluta samtal.                                                                                          |
| `--tp-end-hover`     | `rgba(239, 68, 68, 0.14)`               | `rgba(251, 113, 133, 0.2)`               | Bakgrund för knappen för att avsluta samtal vid hovring.                                                                          |
| `--tp-idle-opacity`  | `0.4`                                   | `0.3`                                    | Deklarerad för nedtoning i viloläge; tillämpas för närvarande inte av någon regel.                                                |

### Åsidosätta anpassade egenskaper

Ange accentfärgen via propen `primaryColor`:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#e11d48"
/>
```

<Warning>
  `--tp-accent` anges som en **inline-stil** från propen `primaryColor`, så åsidosättningar av `--tp-accent` i formatmallar har ingen effekt. Ändra accentfärgen med propen. Alla andra anpassade egenskaper kan åsidosättas i CSS.
</Warning>

Åsidosätt de andra anpassade egenskaperna med CSS. Använd en väljare med två klasser (`.tp-widget.tp--light` / `.tp-widget.tp--dark`) så att din regel har högre prioritet än temaklassen som definierar standardvärdena, oavsett ordningen i formatmallen:

```css theme={null}
.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-klasser

Alla widgetklasser har prefixet `tp-` för att undvika konflikter med dina befintliga stilar.

| Klass                         | Element                      | Beskrivning                                                                                                                                                                                   |
| ----------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `.tp-widget`                  | Rotomslag                    | Behållare med fast position (`position: fixed`, hörn anges av propen `position`, `z-index: 9999`). Har temaklassen och grundläggande teckensnittsinställningar; ingen egen visuell inramning. |
| `.tp--light` / `.tp--dark`    | Temamodifierare              | Tillämpas på `.tp-widget` tillsammans med temat; definierar alla anpassade egenskaper `--tp-*`.                                                                                               |
| `.tp-bar`                     | Fältet                       | Själva den glasliknande pillformen: bakgrund, bakgrundsoskärpa, kantlinje, radie på `99px`, skugga. `300px` bred.                                                                             |
| `.tp-meta`                    | Textblock                    | Behållare för all text -- titel och undertitel i viloläge, agentnamn och status under ett samtal.                                                                                             |
| `.tp-name`                    | Primär etikett               | Visar propen `title` i viloläge och den anslutna agentens namn (med `title` som reserv) under ett samtal.                                                                                     |
| `.tp-sub`                     | Undertitel                   | Raden "Tillgänglig nu" som visas i viloläge.                                                                                                                                                  |
| `.tp-start`                   | Samtalsknapp i viloläge      | Den cirkulära startknappen med accentfärg (42px). Använder `--tp-accent` som bakgrund.                                                                                                        |
| `.tp-dot`                     | Anslutningspunkt             | Pulserande punkt i accentfärg som visas till vänster i fältet medan anslutning sker.                                                                                                          |
| `.tp-wave` / `.tp-wave--idle` | Vågmönster                   | Vågmönstret med fem staplar. `--idle` lägger till den långsamma andningsanimationen; under ett samtal reagerar staplarna på ljud.                                                             |
| `.tp-button`                  | Knappar under samtal         | Grundstil för kontrollerna under samtal (42px, rundade 12px).                                                                                                                                 |
| `.tp-button-group`            | Knapp rad                    | Omsluter knapparna för avstängning av mikrofon och avslut under ett samtal.                                                                                                                   |
| `.tp-button--start`           | Variant för anslutningsknapp | Variant med accentfärg som visas medan ett samtal startar.                                                                                                                                    |
| `.tp-button--mute`            | Växla mikrofonavstängning    | Stänger av eller slår på mikrofonen under ett samtal. Använder `--tp-surface`.                                                                                                                |
| `.tp-button--end`             | Knapp för att avsluta samtal | Lägger på. Använder paletten `--tp-end-*`.                                                                                                                                                    |
| `.tp-button--loading`         | Laddningsmodifierare         | Tonar ned knappen medan anslutning sker.                                                                                                                                                      |
| `.tp-icon` / `.tp-spin`       | Ikoner                       | Storlek på knappikoner; `tp-spin` animerar anslutningssnurran.                                                                                                                                |
| `.tp-status`                  | Statusblock under samtal     | Omsluter statusraden under anslutnings-, anslutet- och feltillstånd.                                                                                                                          |
| `.tp-status__text`            | Statusrad                    | Text för anslutningsstatus (t.ex. "Ansluter...") eller samtalstimern. Får `.tp-status--connected` (accentfärg) eller `.tp-status--error` (färg för fel) beroende på tillstånd.                |
| `.tp-status__name`            | Plats för agentnamn          | Del av statusblocket, men renderas inte i den aktuella fältlayouten -- agentnamnet visas i `.tp-name` i stället.                                                                              |
| `.tp-status__dot`             | Statuspunkt                  | Stil för pulserande punkt i anslutet läge (använder `--tp-connected`).                                                                                                                        |

***

## Exempel

### Anpassad accentfärg via props

Det enklaste sättet att varumärkesanpassa widgeten:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="light"
  primaryColor="#059669"
  title="Talk to support"
/>
```

### Anpassade färger via CSS

Åsidosätt de anpassade egenskaperna för full kontroll över färgerna. Kom ihåg att accentfärgen kommer från propen `primaryColor`, inte från CSS:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#059669"
/>
```

```css theme={null}
/* 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);
}
```

### Anpassad storlek

Gör widgeten större eller mindre genom att justera måtten för fältet, knapparna och texten:

```css theme={null}
/* 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;
}
```

### Dölj textetiketterna

All text i widgeten finns i `.tp-meta`. Dölj den helt om du bara vill behålla vågformen och knapparna:

```css theme={null}
.tp-meta {
  display: none;
}
```

Eller dölj enskilda delar:

```css theme={null}
/* 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>
  Etiketten i viloläge finns i `.tp-name`/`.tp-sub`, inte i `.tp-status` -- om du bara döljer `.tp-status` visas titeln fortfarande när widgeten är i viloläge.
</Note>

### Åsidosättningar för specifika teman

Rikta in dig på ett specifikt tema med temaklassen:

```css theme={null}
/* 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);
}
```

***

## Avgränsning med className

När du använder React-komponenten skickar du en `className`-prop för att begränsa dina åsidosättningar till en specifik widgetinstans:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  className="support-widget"
/>
```

Rikta sedan in dig på den klassen i din CSS:

```css theme={null}
.support-widget.tp--dark {
  --tp-bg: rgba(30, 30, 46, 0.9);
}

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

Detta gör att du kan ha flera widgetinstanser på samma sida med olika stilar. Ge varje instans en egen accentfärg via dess `primaryColor`-prop (CSS kan inte åsidosätta `--tp-accent` -- den anges inline).

***

## Helt anpassat gränssnitt

Om CSS-åsidosättningar inte räcker ger den [headless-hooken](/sv/widget/headless-hook) dig full kontroll. Du tillhandahåller all HTML och styling medan `useThunderPhone` hanterar röstsessionen. Hooken tillhandahåller även `audioLevelRef` för att bygga ljudreaktiva visualiseringar som vågformer.

```tsx theme={null}
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>
  Headless-hooken är rätt val när du behöver ljudreaktiva animationer, anpassade layouter eller integrering i ett befintligt komponentbibliotek. CSS-åsidosättningar och anpassade egenskaper är bättre för snabba temaändringar.
</Tip>