> ## 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.

# Stilsetting

> Tilpass utseendet til ThunderPhone-stemmewidgeten med CSS

Widgeten vises som en glassmorfisk linje med innebygde lyse og mørke temaer. Tilpasning er tilgjengelig på tre nivåer: props for vanlige alternativer, egendefinerte CSS-egenskaper for temastyring og overstyringer av CSS-klasser for full kontroll.

<Note>
  Disse stilalternativene gjelder den forhåndsbygde widgeten som vises av React-komponenten `ThunderPhoneWidget` og CDN-metoden `ThunderPhone.mount()`. Hvis du trenger et helt tilpasset brukergrensesnitt, bruker du [headless-hooken](/nb/widget/headless-hook) i stedet.
</Note>

***

## Temaer

Propen `theme` styrer widgetens fargeskjema. Den legger til klassen `tp--light` eller `tp--dark` på widgetens rotelement:

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

| Tema      | Klasse      | Beskrivelse                            |
| --------- | ----------- | -------------------------------------- |
| `'light'` | `tp--light` | Lys bakgrunn med mørk tekst. Standard. |
| `'dark'`  | `tp--dark`  | Mørk bakgrunn med lys tekst.           |

Begge temaene bruker den glassmorfiske linjedesignen med bakgrunnsuskarphet og diskret gjennomsiktighet.

***

## Egendefinerte CSS-egenskaper

Widgeten eksponerer egendefinerte CSS-egenskaper (variabler) som du kan overstyre for å endre farger uten å endre enkeltklasser. De defineres av temaklassen (`.tp--light` eller `.tp--dark`) som brukes på roten `.tp-widget`:

| Egenskap             | Standard (lys)                          | Standard (mørk)                          | Beskrivelse                                                                                                                         |
| -------------------- | --------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `--tp-accent`        | `#000`                                  | `#fff`                                   | Aksentfarge: startknapp, bølgeformstolper, tilkoblingspunkt, statustekst for tilkoblet. Angis **inline** fra propen `primaryColor`. |
| `--tp-bg`            | `rgba(255, 255, 255, 0.82)`             | `rgba(15, 15, 15, 0.85)`                 | Bakgrunn for linjen (halvtransparent; uskarp med `--tp-glass`).                                                                     |
| `--tp-surface`       | `rgba(0, 0, 0, 0.04)`                   | `rgba(255, 255, 255, 0.07)`              | Bakgrunn for dempeknappen.                                                                                                          |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)`                   | `rgba(255, 255, 255, 0.12)`              | Bakgrunn for dempeknappen ved hover.                                                                                                |
| `--tp-border`        | `rgba(0, 0, 0, 0.08)`                   | `rgba(255, 255, 255, 0.1)`               | Kantlinjer for linje og knapper.                                                                                                    |
| `--tp-border-hover`  | `rgba(0, 0, 0, 0.14)`                   | `rgba(255, 255, 255, 0.18)`              | Kantlinjefarge ved hover.                                                                                                           |
| `--tp-text`          | `rgba(0, 0, 0, 0.88)`                   | `rgba(255, 255, 255, 0.95)`              | Primærtekst (tittel, agentnavn).                                                                                                    |
| `--tp-text-2`        | `rgba(0, 0, 0, 0.5)`                    | `rgba(255, 255, 255, 0.55)`              | Sekundærtekst (undertittel, statuslinje, samtaletidtaker).                                                                          |
| `--tp-glass`         | `blur(32px) saturate(180%)`             | `blur(32px) saturate(180%)`              | `backdrop-filter` som skaper glasseffekten på linjen.                                                                               |
| `--tp-shadow`        | skygge med tre lag                      | skygge med tre lag                       | Linjens `box-shadow` (ring + nære + fjerne lag).                                                                                    |
| `--tp-shadow-hover`  | skygge med tre lag                      | skygge med tre lag                       | Definert for heving ved hover; brukes ikke av noen regel for øyeblikket.                                                            |
| `--tp-glow`          | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Indre utheving øverst som legges over linjens skygge.                                                                               |
| `--tp-connected`     | `#059669`                               | `#34d399`                                | Indikatorfarge for tilkoblet tilstand (statuspunkt).                                                                                |
| `--tp-error`         | `#dc2626`                               | `#fb7185`                                | Farge på statustekst ved feil.                                                                                                      |
| `--tp-end-bg`        | `rgba(239, 68, 68, 0.08)`               | `rgba(251, 113, 133, 0.12)`              | Bakgrunn for avslutt samtale-knappen.                                                                                               |
| `--tp-end-color`     | `#ef4444`                               | `#fb7185`                                | Ikonfarge for avslutt samtale-knappen.                                                                                              |
| `--tp-end-border`    | `rgba(239, 68, 68, 0.12)`               | `rgba(251, 113, 133, 0.15)`              | Kantlinje for avslutt samtale-knappen.                                                                                              |
| `--tp-end-hover`     | `rgba(239, 68, 68, 0.14)`               | `rgba(251, 113, 133, 0.2)`               | Bakgrunn for avslutt samtale-knappen ved hover.                                                                                     |
| `--tp-idle-opacity`  | `0.4`                                   | `0.3`                                    | Definert for nedtoning i inaktiv tilstand; brukes ikke av noen regel for øyeblikket.                                                |

### Overstyre egendefinerte egenskaper

Angi aksentfargen via propen `primaryColor`:

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

<Warning>
  `--tp-accent` angis som en **inline-stil** fra propen `primaryColor`, så overstyringer av `--tp-accent` i stilark har ingen effekt. Endre aksentfargen med propen. Alle andre egendefinerte egenskaper kan overstyres i CSS.
</Warning>

Overstyr de andre egendefinerte egenskapene med CSS. Bruk en selektor med to klasser (`.tp-widget.tp--light` / `.tp-widget.tp--dark`) slik at regelen din veier tyngre enn temaklassen som definerer standardverdiene, uavhengig av rekkefølgen i stilarket:

```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

Alle widgetklasser har prefikset `tp-` for å unngå konflikter med de eksisterende stilene dine.

| Klasse                        | Element                         | Beskrivelse                                                                                                                                                                             |
| ----------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `.tp-widget`                  | Rotomslag                       | Beholder med fast posisjon (`position: fixed`, hjørne angitt av `position`-propen, `z-index: 9999`). Har temaklassen og grunnleggende skriftinnstillinger, uten egen visuell utforming. |
| `.tp--light` / `.tp--dark`    | Temamodifikatorer               | Brukes på `.tp-widget` sammen med temaet; definerer alle egendefinerte egenskaper for `--tp-*`.                                                                                         |
| `.tp-bar`                     | Linjen                          | Selve den glassmorfiske pillen: bakgrunn, uskarp bakgrunn, kantlinje, `99px` radius og skygge. `300px` bred.                                                                            |
| `.tp-meta`                    | Tekstblokk                      | Beholder for all tekst -- tittel og undertittel når den er inaktiv, agentnavn og status under en samtale.                                                                               |
| `.tp-name`                    | Primæretikett                   | Viser `title`-propen når den er inaktiv, og navnet på den tilkoblede agenten (med `title` som reserve) under en samtale.                                                                |
| `.tp-sub`                     | Undertittel                     | Linjen «Tilgjengelig nå» som vises når den er inaktiv.                                                                                                                                  |
| `.tp-start`                   | Samtaleknapp i inaktiv tilstand | Den sirkulære startknappen med aksentfarge (42px). Bruker `--tp-accent` som bakgrunn.                                                                                                   |
| `.tp-dot`                     | Tilkoblingsprikk                | Pulserende prikk med aksentfarge som vises til venstre i linjen under tilkobling.                                                                                                       |
| `.tp-wave` / `.tp-wave--idle` | Bølgeform                       | Bølgeformen med fem stolper. `--idle` legger til den langsomme pustende animasjonen; under en samtale reagerer stolpene på lyd.                                                         |
| `.tp-button`                  | Knapper under samtale           | Grunnstil for kontrollene under samtaler (42px, avrundet 12px).                                                                                                                         |
| `.tp-button-group`            | Knappelinje                     | Omslutter dempe- og avsluttknappene under en samtale.                                                                                                                                   |
| `.tp-button--start`           | Variant for tilkoblingsknapp    | Variant med aksentfarge som vises mens en samtale starter.                                                                                                                              |
| `.tp-button--mute`            | Dempebryter                     | Demper/opphever demping av mikrofonen under en samtale. Bruker `--tp-surface`.                                                                                                          |
| `.tp-button--end`             | Knapp for å avslutte samtale    | Legger på. Bruker paletten `--tp-end-*`.                                                                                                                                                |
| `.tp-button--loading`         | Lastemodifikator                | Toner ned knappen under tilkobling.                                                                                                                                                     |
| `.tp-icon` / `.tp-spin`       | Ikoner                          | Størrelse på knappikoner; `tp-spin` animerer tilkoblingsspinneren.                                                                                                                      |
| `.tp-status`                  | Statusblokk under samtale       | Omslutter statuslinjen under tilstander for tilkobling/tilkoblet/feil.                                                                                                                  |
| `.tp-status__text`            | Statuslinje                     | Tekst for tilkoblingsstatus (for eksempel «Kobler til ...») eller samtaletidtakeren. Får `.tp-status--connected` (aksentfarge) eller `.tp-status--error` (feilfarge) per tilstand.      |
| `.tp-status__name`            | Plass for agentnavn             | Del av statusblokken, men gjengis ikke i det nåværende linjeoppsettet -- agentnavnet vises i `.tp-name` i stedet.                                                                       |
| `.tp-status__dot`             | Statusprikk                     | Stil for pulserende prikk i tilkoblet tilstand (bruker `--tp-connected`).                                                                                                               |

***

## Eksempler

### Egendefinert aksent via props

Den enkleste måten å tilpasse widgeten til merkevaren din på:

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

### Egendefinerte farger via CSS

Overstyr de egendefinerte egenskapene for full kontroll over fargene. Husk at aksentfargen kommer fra prop-en `primaryColor`, ikke 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);
}
```

### Egendefinert størrelse

Gjør widgeten større eller mindre ved å justere dimensjonene for linjen, knappene og teksten:

```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;
}
```

### Skjul tekstetikettene

All teksten i widgeten ligger i `.tp-meta`. Skjul den helt for å beholde bare bølgeformen og knappene:

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

Eller skjul enkeltområder:

```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 når widgeten er inaktiv ligger i `.tp-name`/`.tp-sub`, ikke `.tp-status` -- hvis du bare skjuler `.tp-status`, vises tittelen fortsatt når widgeten er inaktiv.
</Note>

### Temaspesifikke overstyringer

Målrett et bestemt 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);
}
```

***

## Avgrensing med className

Når du bruker React-komponenten, kan du sende inn en `className`-prop for å avgrense overstyringene dine til en bestemt widgetinstans:

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

Målrett deretter denne klassen i CSS-en din:

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

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

Dette lar deg ha flere widgetinstanser på samme side med ulike stiler. Gi hver instans sin egen aksentfarge via `primaryColor`-prop-en (CSS kan ikke overstyre `--tp-accent` -- den angis inline).

***

## Fullstendig egendefinert UI

Hvis CSS-overstyringer ikke er nok, gir [headless-hooken](/nb/widget/headless-hook) deg full kontroll. Du angir all HTML og styling, mens `useThunderPhone` håndterer stemmeøkten. Hooken gir også `audioLevelRef` for å bygge lydreaktive visualiseringer som bølgeformer.

```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 er riktig valg når du trenger lydreaktive animasjoner, egendefinerte oppsett eller integrasjon med et eksisterende komponentbibliotek. CSS-overstyringer og egendefinerte egenskaper er bedre for raske temajusteringer.
</Tip>