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

# Stijlen

> Pas het uiterlijk van de ThunderPhone-spraakwidget aan met CSS

De widget wordt weergegeven als een glasachtige balk met ingebouwde lichte en donkere thema's. Aanpassing is beschikbaar op drie niveaus: props voor veelvoorkomende opties, aangepaste CSS-eigenschappen voor thematisering en CSS-klasse-overschrijvingen voor volledige controle.

<Note>
  Deze stijlopties zijn van toepassing op de vooraf gebouwde widget die wordt weergegeven door de React-component `ThunderPhoneWidget` en de CDN-methode `ThunderPhone.mount()`. Als je een volledig aangepaste UI nodig hebt, gebruik dan in plaats daarvan de [headless hook](/nl/widget/headless-hook).
</Note>

***

## Thema's

De prop `theme` bepaalt het kleurenschema van de widget. Deze voegt een klasse `tp--light` of `tp--dark` toe aan de hoofdcontainer van de widget:

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

| Thema     | Klasse      | Beschrijving                                     |
| --------- | ----------- | ------------------------------------------------ |
| `'light'` | `tp--light` | Lichte achtergrond met donkere tekst. Standaard. |
| `'dark'`  | `tp--dark`  | Donkere achtergrond met lichte tekst.            |

Beide thema's gebruiken het glasachtige balkontwerp met achtergrondvervaging en subtiele transparantie.

***

## Aangepaste CSS-eigenschappen

De widget biedt aangepaste CSS-eigenschappen (variabelen) die je kunt overschrijven om kleuren te wijzigen zonder afzonderlijke klassen aan te passen. Ze worden gedefinieerd door de themaklasse (`.tp--light` of `.tp--dark`) die op de `.tp-widget`-root wordt toegepast:

| Eigenschap           | Standaard (licht)                       | Standaard (donker)                       | Beschrijving                                                                                                                                |
| -------------------- | --------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `--tp-accent`        | `#000`                                  | `#fff`                                   | Accentkleur: startknop, golfvormbalken, verbindingspunt, statustekst voor verbonden. Wordt **inline** ingesteld via de `primaryColor`-prop. |
| `--tp-bg`            | `rgba(255, 255, 255, 0.82)`             | `rgba(15, 15, 15, 0.85)`                 | Achtergrond van de balk (doorschijnend; vervaagd door `--tp-glass`).                                                                        |
| `--tp-surface`       | `rgba(0, 0, 0, 0.04)`                   | `rgba(255, 255, 255, 0.07)`              | Achtergrond van de dempknop.                                                                                                                |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)`                   | `rgba(255, 255, 255, 0.12)`              | Achtergrond van de dempknop bij aanwijzen.                                                                                                  |
| `--tp-border`        | `rgba(0, 0, 0, 0.08)`                   | `rgba(255, 255, 255, 0.1)`               | Randen van de balk en knoppen.                                                                                                              |
| `--tp-border-hover`  | `rgba(0, 0, 0, 0.14)`                   | `rgba(255, 255, 255, 0.18)`              | Randkleur bij aanwijzen.                                                                                                                    |
| `--tp-text`          | `rgba(0, 0, 0, 0.88)`                   | `rgba(255, 255, 255, 0.95)`              | Primaire tekst (titel, naam van de agent).                                                                                                  |
| `--tp-text-2`        | `rgba(0, 0, 0, 0.5)`                    | `rgba(255, 255, 255, 0.55)`              | Secundaire tekst (ondertitel, statusregel, gesprekstimer).                                                                                  |
| `--tp-glass`         | `blur(32px) saturate(180%)`             | `blur(32px) saturate(180%)`              | `backdrop-filter` die het glaseffect op de balk creëert.                                                                                    |
| `--tp-shadow`        | schaduwstapel met drie lagen            | schaduwstapel met drie lagen             | De `box-shadow` van de balk (ring + nabije + verre lagen).                                                                                  |
| `--tp-shadow-hover`  | schaduwstapel met drie lagen            | schaduwstapel met drie lagen             | Gedeclareerd voor verhoging bij aanwijzen; momenteel niet toegepast door een 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)` | Binnenste bovenste highlight die over de schaduw van de balk wordt gelegd.                                                                  |
| `--tp-connected`     | `#059669`                               | `#34d399`                                | Kleur van de indicator voor de verbonden status (statuspunt).                                                                               |
| `--tp-error`         | `#dc2626`                               | `#fb7185`                                | Tekstkleur voor de foutstatus.                                                                                                              |
| `--tp-end-bg`        | `rgba(239, 68, 68, 0.08)`               | `rgba(251, 113, 133, 0.12)`              | Achtergrond van de knop om het gesprek te beëindigen.                                                                                       |
| `--tp-end-color`     | `#ef4444`                               | `#fb7185`                                | Icoonkleuren van de knop om het gesprek te beëindigen.                                                                                      |
| `--tp-end-border`    | `rgba(239, 68, 68, 0.12)`               | `rgba(251, 113, 133, 0.15)`              | Rand van de knop om het gesprek te beëindigen.                                                                                              |
| `--tp-end-hover`     | `rgba(239, 68, 68, 0.14)`               | `rgba(251, 113, 133, 0.2)`               | Achtergrond van de knop om het gesprek te beëindigen bij aanwijzen.                                                                         |
| `--tp-idle-opacity`  | `0.4`                                   | `0.3`                                    | Gedeclareerd voor dimmen in de inactieve status; momenteel niet toegepast door een regel.                                                   |

### Aangepaste eigenschappen overschrijven

Stel de accentkleur in via de `primaryColor`-prop:

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

<Warning>
  `--tp-accent` wordt ingesteld als een **inline stijl** via de `primaryColor`-prop, dus overschrijvingen van `--tp-accent` in stylesheets hebben geen effect. Wijzig de accentkleur met de prop. Alle andere aangepaste eigenschappen kun je in CSS overschrijven.
</Warning>

Overschrijf de andere aangepaste eigenschappen met CSS. Gebruik een selector met twee klassen (`.tp-widget.tp--light` / `.tp-widget.tp--dark`), zodat je regel zwaarder weegt dan de themaklasse die de standaardwaarden definieert, ongeacht de volgorde van de stylesheet:

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

Alle widgetklassen hebben het voorvoegsel `tp-` om conflicten met je bestaande stijlen te voorkomen.

| Klasse                        | Element                                | Beschrijving                                                                                                                                                                                       |
| ----------------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `.tp-widget`                  | Hoofdcontainer                         | Container met vaste positie (`position: fixed`, hoek ingesteld via de `position`-prop, `z-index: 9999`). Bevat de themaklasse en basislettertype-instellingen; heeft zelf geen visuele omlijsting. |
| `.tp--light` / `.tp--dark`    | Thema-aanpassingen                     | Worden samen met het thema toegepast op `.tp-widget`; definiëren alle aangepaste eigenschappen `--tp-*`.                                                                                           |
| `.tp-bar`                     | De balk                                | De glazen pilvormige balk zelf: achtergrond, achtergrondvervaging, rand, straal van `99px`, schaduw. `300px` breed.                                                                                |
| `.tp-meta`                    | Tekstblok                              | Container voor alle tekst -- titel en ondertitel wanneer inactief, naam en status van de agent tijdens een oproep.                                                                                 |
| `.tp-name`                    | Primair label                          | Toont de `title`-prop wanneer inactief, en de naam van de verbonden agent (met `title` als terugvaloptie) tijdens een oproep.                                                                      |
| `.tp-sub`                     | Ondertitel                             | De regel "Nu beschikbaar" die wordt getoond wanneer inactief.                                                                                                                                      |
| `.tp-start`                   | Knop voor oproep in inactieve toestand | De ronde startknop met accentkleur (42px). Gebruikt `--tp-accent` als achtergrond.                                                                                                                 |
| `.tp-dot`                     | Verbindingspunt                        | Pulserend punt met accentkleur dat tijdens het verbinden links van de balk wordt weergegeven.                                                                                                      |
| `.tp-wave` / `.tp-wave--idle` | Golfvorm                               | De golfvorm met vijf balken. `--idle` voegt de langzame ademhalingsanimatie toe; tijdens een oproep reageren de balken op audio.                                                                   |
| `.tp-button`                  | Knoppen tijdens een oproep             | Basisstijl voor bedieningselementen tijdens een oproep (42px, afgerond met 12px).                                                                                                                  |
| `.tp-button-group`            | Knoppenrij                             | Bevat de knoppen voor dempen en beëindigen tijdens een oproep.                                                                                                                                     |
| `.tp-button--start`           | Variant voor verbindingsknop           | Variant met accentkleur die wordt weergegeven terwijl een oproep wordt gestart.                                                                                                                    |
| `.tp-button--mute`            | Schakelaar voor dempen                 | Dempt of heft de demping van de microfoon op tijdens een oproep. Gebruikt `--tp-surface`.                                                                                                          |
| `.tp-button--end`             | Knop voor oproep beëindigen            | Hangt op. Gebruikt het palet `--tp-end-*`.                                                                                                                                                         |
| `.tp-button--loading`         | Laadstatusaanpassing                   | Maakt de knop donkerder tijdens het verbinden.                                                                                                                                                     |
| `.tp-icon` / `.tp-spin`       | Pictogrammen                           | Grootte van knopictogrammen; `tp-spin` animeert de verbindingsspinner.                                                                                                                             |
| `.tp-status`                  | Statusblok tijdens oproep              | Bevat de statusregel tijdens de statussen verbinden/verbonden/fout.                                                                                                                                |
| `.tp-status__text`            | Statusregel                            | Tekst voor de verbindingsstatus (bijvoorbeeld "Verbinden...") of de oproeptimer. Krijgt `.tp-status--connected` (accentkleur) of `.tp-status--error` (foutkleur) afhankelijk van de status.        |
| `.tp-status__name`            | Plaats voor agentnaam                  | Onderdeel van het statusblok, maar wordt niet weergegeven in de huidige balkindeling -- de naam van de agent verschijnt in plaats daarvan in `.tp-name`.                                           |
| `.tp-status__dot`             | Statuspunt                             | Stijl voor pulserend punt in verbonden toestand (gebruikt `--tp-connected`).                                                                                                                       |

***

## Voorbeelden

### Aangepast accent via props

De eenvoudigste manier om de widget van je merk te voorzien:

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

### Aangepaste kleuren via CSS

Overschrijf de aangepaste eigenschappen voor volledige controle over de kleuren. Onthoud dat het accent afkomstig is van de prop `primaryColor`, niet van 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);
}
```

### Aangepast formaat

Maak de widget groter of kleiner door de afmetingen van de balk, knoppen en tekst aan te passen:

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

### De tekstlabels verbergen

Alle tekst van de widget bevindt zich in `.tp-meta`. Verberg deze volledig zodat alleen de golfvorm en knoppen overblijven:

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

Of verberg afzonderlijke onderdelen:

```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>
  Het inactieve label bevindt zich in `.tp-name`/`.tp-sub`, niet in `.tp-status` -- als je alleen `.tp-status` verbergt, wordt de titel nog steeds weergegeven wanneer de widget inactief is.
</Note>

### Thema-specifieke overschrijvingen

Richt je op een specifiek thema met de themaklasse:

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

***

## Afbakenen met className

Wanneer je de React-component gebruikt, geef je een prop `className` door om je overschrijvingen te beperken tot een specifieke widgetinstantie:

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

Richt je vervolgens in je CSS op die klasse:

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

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

Hiermee kun je meerdere widgetinstanties met verschillende stijlen op dezelfde pagina hebben. Geef elke instantie een eigen accent via de prop `primaryColor` (CSS kan `--tp-accent` niet overschrijven -- deze wordt inline ingesteld).

***

## Volledig aangepaste UI

Als CSS-overschrijvingen niet voldoende zijn, geeft de [headless hook](/nl/widget/headless-hook) je volledige controle. Je levert alle HTML en styling, terwijl `useThunderPhone` de spraaksessie afhandelt. De hook biedt ook `audioLevelRef` voor het bouwen van audio-reactieve visualisaties, zoals golfvormen.

```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>
  De headless hook is de juiste keuze wanneer je audio-reactieve animaties, aangepaste lay-outs of integratie met een bestaande componentbibliotheek nodig hebt. CSS-overschrijvingen en aangepaste eigenschappen zijn beter geschikt voor snelle aanpassingen aan het thema.
</Tip>