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

# Tilpasning af udseende

> Tilpas udseendet af ThunderPhones stemmewidget med CSS

Widgetten gengives som en glassmorfisk bjælke med indbyggede lyse og mørke temaer. Tilpasning er tilgængelig på tre niveauer: props til almindelige indstillinger, brugerdefinerede CSS-egenskaber til tematisering og CSS-klasseoverstyringer til fuld kontrol.

<Note>
  Disse stylingmuligheder gælder for den færdigbyggede widget, der gengives af React-komponenten `ThunderPhoneWidget` og CDN-metoden `ThunderPhone.mount()`. Hvis du har brug for en helt tilpasset brugerflade, skal du i stedet bruge [headless-hooken](/da/widget/headless-hook).
</Note>

***

## Temaer

Proppen `theme` styrer widgettens farveskema. Den anvender en klasse, enten `tp--light` eller `tp--dark`, på widgettens rod:

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

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

Begge temaer bruger det glassmorfiske bjælkedesign med sløring af baggrunden og diskret gennemsigtighed.

***

## Brugerdefinerede CSS-egenskaber

Widgetten eksponerer brugerdefinerede CSS-egenskaber (variabler), som du kan tilsidesætte for at ændre farver uden at ændre individuelle klasser. De defineres af temaklassen (`.tp--light` eller `.tp--dark`), der anvendes på roden `.tp-widget`:

| Egenskab             | Standard (lys)                          | Standard (mørk)                          | Beskrivelse                                                                                                                                   |
| -------------------- | --------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `--tp-accent`        | `#000`                                  | `#fff`                                   | Fremhævningsfarve: startknap, bølgeformsbjælker, forbindelsesprik, statustekst for forbindelse. Angives **inline** fra propen `primaryColor`. |
| `--tp-bg`            | `rgba(255, 255, 255, 0.82)`             | `rgba(15, 15, 15, 0.85)`                 | Bjælkens baggrund (halvgennemsigtig; sløret af `--tp-glass`).                                                                                 |
| `--tp-surface`       | `rgba(0, 0, 0, 0.04)`                   | `rgba(255, 255, 255, 0.07)`              | Baggrund for slå-lyd-fra-knappen.                                                                                                             |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)`                   | `rgba(255, 255, 255, 0.12)`              | Hoverbaggrund for slå-lyd-fra-knappen.                                                                                                        |
| `--tp-border`        | `rgba(0, 0, 0, 0.08)`                   | `rgba(255, 255, 255, 0.1)`               | Kanter for bjælke og knapper.                                                                                                                 |
| `--tp-border-hover`  | `rgba(0, 0, 0, 0.14)`                   | `rgba(255, 255, 255, 0.18)`              | Kantfarve ved hover.                                                                                                                          |
| `--tp-text`          | `rgba(0, 0, 0, 0.88)`                   | `rgba(255, 255, 255, 0.95)`              | Primær tekst (titel, agentnavn).                                                                                                              |
| `--tp-text-2`        | `rgba(0, 0, 0, 0.5)`                    | `rgba(255, 255, 255, 0.55)`              | Sekundær tekst (undertitel, statuslinje, opkaldstimer).                                                                                       |
| `--tp-glass`         | `blur(32px) saturate(180%)`             | `blur(32px) saturate(180%)`              | `backdrop-filter`, der skaber glaseffekten på bjælken.                                                                                        |
| `--tp-shadow`        | skygger i tre lag                       | skygger i tre lag                        | Bjælkens `box-shadow` (ring + nære + fjerne lag).                                                                                             |
| `--tp-shadow-hover`  | skygger i tre lag                       | skygger i tre lag                        | Deklareret til løft ved hover; anvendes i øjeblikket ikke af nogen 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)` | Indvendig fremhævning øverst, lagt oven på bjælkens skygge.                                                                                   |
| `--tp-connected`     | `#059669`                               | `#34d399`                                | Farve for indikator i forbundet tilstand (statusprik).                                                                                        |
| `--tp-error`         | `#dc2626`                               | `#fb7185`                                | Farve for statustekst i fejltilstand.                                                                                                         |
| `--tp-end-bg`        | `rgba(239, 68, 68, 0.08)`               | `rgba(251, 113, 133, 0.12)`              | Baggrund for afslut-opkald-knappen.                                                                                                           |
| `--tp-end-color`     | `#ef4444`                               | `#fb7185`                                | Ikonfarve for afslut-opkald-knappen.                                                                                                          |
| `--tp-end-border`    | `rgba(239, 68, 68, 0.12)`               | `rgba(251, 113, 133, 0.15)`              | Kant for afslut-opkald-knappen.                                                                                                               |
| `--tp-end-hover`     | `rgba(239, 68, 68, 0.14)`               | `rgba(251, 113, 133, 0.2)`               | Hoverbaggrund for afslut-opkald-knappen.                                                                                                      |
| `--tp-idle-opacity`  | `0.4`                                   | `0.3`                                    | Deklareret til nedtoning i inaktiv tilstand; anvendes i øjeblikket ikke af nogen regel.                                                       |

### Tilsidesættelse af brugerdefinerede egenskaber

Angiv fremhævningsfarven via propen `primaryColor`:

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

<Warning>
  `--tp-accent` angives som en **inline-stil** fra propen `primaryColor`, så tilsidesættelser af `--tp-accent` i stylesheets ikke har nogen effekt. Skift fremhævningsfarven med propen. Alle andre brugerdefinerede egenskaber kan tilsidesættes i CSS.
</Warning>

Tilsidesæt de øvrige brugerdefinerede egenskaber med CSS. Brug en selector med to klasser (`.tp-widget.tp--light` / `.tp-widget.tp--dark`), så din regel vejer tungere end temaklassen, der definerer standardværdierne, uanset rækkefølgen i stylesheets:

```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 er præfikset med `tp-` for at undgå konflikter med dine eksisterende typografier.

| Klasse                        | Element                        | Beskrivelse                                                                                                                                                                                               |
| ----------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `.tp-widget`                  | Rodwrapper                     | Container med fast position (`position: fixed`, hjørne angivet af propen `position`, `z-index: 9999`). Indeholder temaklassen og grundlæggende skrifttypeindstillinger; har ingen egen visuel udformning. |
| `.tp--light` / `.tp--dark`    | Temamodifikatorer              | Anvendes på `.tp-widget` sammen med temaet; definerer alle brugerdefinerede egenskaber for `--tp-*`.                                                                                                      |
| `.tp-bar`                     | Bjælken                        | Selve den glasagtige pille: baggrund, baggrundssløring, kant, radius på `99px`, skygge. `300px` bred.                                                                                                     |
| `.tp-meta`                    | Tekstblok                      | Container til al tekst -- titel og undertitel i inaktiv tilstand, agentnavn og status under et opkald.                                                                                                    |
| `.tp-name`                    | Primær etiket                  | Viser propen `title` i inaktiv tilstand og den tilsluttede agents navn (falder tilbage til `title`) under et opkald.                                                                                      |
| `.tp-sub`                     | Undertitel                     | Linjen "Tilgængelig nu", der vises i inaktiv tilstand.                                                                                                                                                    |
| `.tp-start`                   | Opkaldsknap i inaktiv tilstand | Den cirkulære startknap med accentfarve (42px). Bruger `--tp-accent` som baggrund.                                                                                                                        |
| `.tp-dot`                     | Tilslutningsprik               | Pulserende prik med accentfarve, der vises til venstre på bjælken under tilslutning.                                                                                                                      |
| `.tp-wave` / `.tp-wave--idle` | Bølgeform                      | Bølgeformen med fem bjælker. `--idle` tilføjer den langsomme åndedrætsanimation; under et opkald reagerer bjælkerne på lyd.                                                                               |
| `.tp-button`                  | Knapper under opkald           | Grundstil for kontrolelementerne under opkald (42px, afrundet 12px).                                                                                                                                      |
| `.tp-button-group`            | Knaprække                      | Omslutter knapperne til slå lyd fra og afslut under et opkald.                                                                                                                                            |
| `.tp-button--start`           | Variant af tilslutningsknap    | Variant med accentfarve, der vises, mens et opkald starter.                                                                                                                                               |
| `.tp-button--mute`            | Skift lyd fra                  | Slår mikrofonen fra eller til under et opkald. Bruger `--tp-surface`.                                                                                                                                     |
| `.tp-button--end`             | Knap til afslut opkald         | Lægger på. Bruger paletten `--tp-end-*`.                                                                                                                                                                  |
| `.tp-button--loading`         | Indlæsningsmodifikator         | Nedtoner knappen under tilslutning.                                                                                                                                                                       |
| `.tp-icon` / `.tp-spin`       | Ikoner                         | Størrelse på knapikoner; `tp-spin` animerer tilslutningsspinneren.                                                                                                                                        |
| `.tp-status`                  | Statusblok under opkald        | Omslutter statuslinjen under tilstandene tilslutter/tilsluttet/fejl.                                                                                                                                      |
| `.tp-status__text`            | Statuslinje                    | Tekst for forbindelsestilstand (f.eks. "Forbinder...") eller opkaldstimeren. Får `.tp-status--connected` (accentfarve) eller `.tp-status--error` (fejlfarve) afhængigt af tilstanden.                     |
| `.tp-status__name`            | Plads til agentnavn            | Del af statusblokken, men gengives ikke i det aktuelle bjælkelayout -- agentnavnet vises i stedet i `.tp-name`.                                                                                           |
| `.tp-status__dot`             | Statusprik                     | Stil for pulserende prik i tilsluttet tilstand (bruger `--tp-connected`).                                                                                                                                 |

***

## Eksempler

### Tilpasset accent via props

Den nemmeste måde at tilpasse widgetten til dit brand:

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

### Tilpassede farver via CSS

Overskriv de brugerdefinerede egenskaber for fuld kontrol over farverne. Husk, at accentfarven kommer fra proppen `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);
}
```

### Tilpasset størrelse

Gør widgetten større eller mindre ved at justere dimensionerne for bjælken, knapperne 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 tekstetiketterne

Al widgettens tekst findes i `.tp-meta`. Skjul den helt for kun at beholde bølgeformen og knapperne:

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

Eller skjul enkelte dele:

```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 inaktiv tilstand findes i `.tp-name`/`.tp-sub`, ikke `.tp-status` -- hvis du kun skjuler `.tp-status`, vises titlen stadig, når widgetten er inaktiv.
</Note>

### Tema-specifikke overskrivninger

Vælg 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);
}
```

***

## Afgrænsning med className

Når du bruger React-komponenten, skal du angive en `className`-prop for at afgrænse dine overskrivninger til en bestemt widgetinstans:

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

Målret derefter denne klasse 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;
}
```

Det gør det muligt at have flere widgetinstanser på samme side med forskellige stilarter. Giv hver instans sin egen accentfarve via dens `primaryColor`-prop (CSS kan ikke overskrive `--tp-accent` -- den angives inline).

***

## Fuldt tilpasset brugergrænseflade

Hvis CSS-overskrivninger ikke er nok, giver den [headless hook](/da/widget/headless-hook) dig fuld kontrol. Du leverer al HTML og styling, mens `useThunderPhone` håndterer stemmesessionen. Hooken giver også `audioLevelRef` til at 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>
  Den headless hook er det rigtige valg, når du har brug for lydreaktive animationer, tilpassede layouts eller integration i et eksisterende komponentbibliotek. CSS-overskrivninger og brugerdefinerede egenskaber er bedre til hurtige temaændringer.
</Tip>