---
title: Temi
description: Scegli un tema integrato (Jam, Nebula, Pulsar, Halo o Dusk) per tipografia, layout, spaziatura e modalità scura; adatta i colori al tuo brand.
---

> **For AI agents:** the complete documentation index is at [llms.txt](https://jamdesk.com/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Imposta `theme` in `docs.json` per controllare layout, tipografia, spaziatura e comportamento della modalità scura. Sono disponibili cinque temi: `jam` (predefinito), `nebula`, `pulsar`, `halo` e `dusk`.

Gli screenshot mostrano l'interfaccia in inglese.

```json docs.json
{
  "theme": "jam"
}
```

<Tip>
Prova ogni tema su questa documentazione prima di scegliere. Selezionane uno in **Preview a theme** nella parte superiore della barra laterale. Su dispositivo mobile, apri il menu di navigazione. L'anteprima resta attiva finché non chiudi il browser.
</Tip>

## Temi disponibili

### Jam

<Frame>
  <img src="/images/themes/jam-theme.webp" alt="Anteprima del tema Jam" />
</Frame>

Il tema predefinito. Layout con logo nell'intestazione e sfondo con gradiente radiale derivato dal colore principale. Bordi arrotondati (6-24px).

[Visualizza l'esempio dal vivo](https://jamdesk.com/docs/introduction)

```json
{
  "theme": "jam"
}
```

### Nebula

<Frame>
  <img src="/images/themes/nebula-theme.webp" alt="Anteprima del tema Nebula" />
</Frame>

Layout con logo nell'intestazione e IBM Plex Mono in tutto il sito. Sfondo color crema caldo (`#FEFCF9`) in modalità chiara. Raggio dei bordi minimo (2-8px).

[Visualizza l'esempio dal vivo](https://nebula.jamdesk.com)

```json
{
  "theme": "nebula"
}
```

### Pulsar

<Frame>
  <img src="/images/themes/pulsar-theme.webp" alt="Anteprima del tema Pulsar" />
</Frame>

Layout con la barra laterale in primo piano, logo nella barra laterale e indicatori di navigazione con bordo a sinistra. Larghezza completa con contenuto centrato di 780px. Intestazione nascosta per impostazione predefinita.

[Visualizza l'esempio dal vivo](https://pulsar.jamdesk.com)

```json
{
  "theme": "pulsar"
}
```

### Halo

<Frame>
  <img src="/images/themes/halo-theme.webp" alt="Anteprima del tema Halo" />
</Frame>

Layout con logo nell'intestazione e Figtree in tutto il sito. Sfondo color sabbia caldo (`#F7F2E8`) con il contenuto rialzato su una scheda. Angoli molto arrotondati (8-28px).

[Visualizza l'esempio dal vivo](https://halo.jamdesk.com)

```json
{
  "theme": "halo"
}
```

### Dusk

<Frame>
  <img src="/images/themes/dusk-theme.webp" alt="Anteprima del tema Dusk" />
</Frame>

Layout con logo nell'intestazione, con Inter per il corpo del testo e IBM Plex Serif per i titoli. Design piatto a superficie unica, senza schede sollevate, solo bordi da 1px. Accento blu inchiostro. Bordi arrotondati contenuti (4-16px).

[Visualizza esempio live](https://dusk.jamdesk.com)

```json
{
  "theme": "dusk"
}
```

## Tipografia

Ogni tema include font caricati da Google Fonts:

| Tema | Intestazioni | Corpo | Codice |
|-------|----------|------|------|
| [Jam](https://jamdesk.com/docs/introduction) | Inter | Inter | JetBrains Mono |
| [Nebula](https://nebula.jamdesk.com) | IBM Plex Mono | IBM Plex Mono | IBM Plex Mono |
| [Pulsar](https://pulsar.jamdesk.com) | Inter | Inter | JetBrains Mono |
| [Halo](https://halo.jamdesk.com) | Figtree | Figtree | JetBrains Mono |
| [Dusk](https://dusk.jamdesk.com) | IBM Plex Serif | Inter | JetBrains Mono |

Consigliamo di mantenere i valori predefiniti, calibrati per ciascun tema. Per un aspetto diverso, imposta `fonts` in `docs.json` per usare un Google Font in tutto il sito:

```json
{
  "fonts": {
    "family": "Lora"
  }
}
```

Usa font separati per le intestazioni e il corpo del testo:

```json
{
  "fonts": {
    "heading": { "family": "Space Grotesk" },
    "body": { "family": "Inter" }
  }
}
```

Puoi usare qualsiasi Google Font. Imposta solo `family` e il build lo scaricherà automaticamente. Per ospitare autonomamente un font personalizzato, aggiungi `source` (URL o percorso relativo a `/`) e `format`:

```json
{
  "fonts": {
    "family": "AcmeSans",
    "source": "/fonts/acme-sans.woff2",
    "format": "woff2"
  }
}
```

Imposta `weight` per rendere il testo del corpo più leggero (o più pesante). È utile per i font geometrici delicati come Geist:

```json
{
  "fonts": {
    "family": "Geist",
    "weight": 200
  }
}
```

`weight` imposta solo il peso del testo del **corpo**; le intestazioni mantengono i pesi più marcati di ciascun tema, preservando la gerarchia tipografica. Funziona anche nella forma `body`: `"body": { "family": "Geist", "weight": 200 }`.

Per intervenire su aspetti che vanno oltre il campo `fonts` (sovrascrivere i font del codice, regolare i pesi per livello di intestazione o caricare webfont non Google), consulta [CSS personalizzato](https://jamdesk.com/docs/it/customization/custom-css#font-esterni).

## Colori personalizzati

Sovrascrivi la palette predefinita per adattarla all'identità del tuo brand:

```json
{
  "theme": "jam",
  "colors": {
    "primary": "#635BFF",
    "light": "#7C75FF",
    "dark": "#4F46E5"
  }
}
```

| Colore | Utilizzo |
|-------|-------|
| `primary` | Link, pulsanti, accenti |
| `light` | Stati al passaggio del mouse, evidenziazioni |
| `dark` | Stati attivi, accenti della modalità scura |

<Note>
I colori vengono applicati dopo il build successivo. Durante lo sviluppo locale, riavvia il server dev per visualizzare le modifiche.
</Note>

<Tip>
Usa uno strumento per i colori come [Coolors](https://coolors.co) o [Realtime Colors](https://realtimecolors.com) per generare una palette armoniosa.
</Tip>

<Tip>
**Ti serve altro oltre ai colori?** [CSS personalizzato](https://jamdesk.com/docs/it/customization/custom-css) ti permette di sovrascrivere i colori delle pagine, la spaziatura, i raggi dei bordi, gli stili dei riquadri informativi e i dettagli dei singoli componenti. I temi impostano i valori predefiniti; il CSS personalizzato offre un'alternativa per tutto ciò che si può modificare con CSS.
</Tip>

## Modalità scura

Tutti i temi includono la modalità scura. Per impostazione predefinita, Jamdesk segue le preferenze di sistema dell'utente e offre un interruttore nella barra di navigazione. La palette di colori si adatta automaticamente.

Blocca il sito su una modalità specifica con `appearance` in `docs.json`:

```json
{
  "appearance": {
    "default": "dark",
    "strict": true
  }
}
```

| Campo | Valori | Predefinito | Descrizione |
|-------|--------|---------|-------------|
| `default` | `"system"` \| `"light"` \| `"dark"` | `"system"` | Modalità iniziale per chi visita il sito per la prima volta |
| `strict` | boolean | `false` | Se `true`, nasconde l'interruttore nella barra di navigazione, mantenendo i visitatori su `default` |

Imposta solo `default` per suggerire una modalità iniziale, lasciando comunque agli utenti la possibilità di cambiarla. Aggiungi `strict: true` per rimuovere del tutto l'interruttore e bloccare il sito su quella modalità.

Per provare la modalità scura durante lo sviluppo, usa l'interruttore nella barra di navigazione oppure simulala in DevTools:

1. Apri DevTools
2. Premi Cmd+Shift+P (Mac) o Ctrl+Shift+P (Windows)
3. Cerca "Emulate CSS prefers-color-scheme: dark"

Per controllare con precisione gli stili della modalità scura, usa [CSS personalizzato](https://jamdesk.com/docs/it/customization/custom-css).

## Qual è il prossimo passo?

<Columns cols={3}>
  <Card title="Branding" icon="palette" href="/it/customization/branding">
    Personalizza loghi, colori e favicon
  </Card>
  <Card title="CSS personalizzato" icon="paintbrush" href="/it/customization/custom-css">
    Sovrascrivi gli stili del tema con il tuo CSS
  </Card>
  <Card title="Navigazione" icon="bars" href="/it/navigation/overview">
    Configura schede, gruppi e struttura delle pagine
  </Card>
</Columns>