---
title: Temi
description: Scegli un tema integrato (Jam, Nebula, Pulsar o Halo) per gestire tipografia, layout, spaziatura e modalità scura. Personalizza i colori per il tuo brand.
---
> **For AI agents:** the complete documentation index is at [llms.txt](/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 quattro temi: `jam` (predefinito), `nebula`, `pulsar` e `halo`.
Gli screenshot mostrano l'interfaccia in inglese.
```json docs.json
{
"theme": "jam"
}
```
## Temi disponibili
Il tema predefinito. Layout con logo nell'intestazione e sfondo con gradiente radiale derivato dal colore principale. Bordi arrotondati (6-24px).
[Visualizza esempio dal vivo](https://jamdesk.com/docs/introduction)
```json
{
"theme": "jam"
}
```
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 esempio dal vivo](https://nebula.jamdesk.com)
```json
{
"theme": "nebula"
}
```
Layout con barra laterale in primo piano, logo nella barra laterale e indicatori di navigazione sul bordo sinistro. Contenuto a larghezza completa, centrato e largo 780px. L'intestazione è nascosta per impostazione predefinita.
[Visualizza esempio dal vivo](https://pulsar.jamdesk.com)
```json
{
"theme": "pulsar"
}
```
Layout con logo nell'intestazione e Figtree in tutto il sito. Sfondo color sabbia caldo (`#F7F2E8`) con il contenuto sollevato su una scheda. Bordi molto arrotondati (8-28px).
[Visualizza esempio dal vivo](https://halo.jamdesk.com)
```json
{
"theme": "halo"
}
```
## Tipografia
Ogni tema include caratteri 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 |
Ti consigliamo le impostazioni predefinite, ottimizzate per ogni tema. Se vuoi un aspetto diverso, imposta `fonts` in `docs.json` per sostituire il carattere dell'intero sito con un Google Font:
```json
{
"fonts": {
"family": "Lora"
}
}
```
Usa caratteri separati per le intestazioni e il corpo:
```json
{
"fonts": {
"heading": { "family": "Space Grotesk" },
"body": { "family": "Inter" }
}
}
```
Funziona qualsiasi Google Font. Imposta solo `family` e la build lo scaricherà automaticamente. Per ospitare autonomamente un carattere personalizzato, aggiungi `source` (URL o percorso relativo a `/`) e `format`:
```json
{
"fonts": {
"family": "AcmeSans",
"source": "/fonts/acme-sans.woff2",
"format": "woff2"
}
}
```
Imposta `weight` per un corpo più leggero (o più pesante). È utile per caratteri 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 del tema, così la gerarchia tipografica resta intatta. Funziona anche nella forma `body`: `"body": { "family": "Geist", "weight": 200 }`.
Per qualsiasi configurazione oltre il campo `fonts` (sostituzione dei caratteri del codice, regolazione dei pesi per livello di intestazione o caricamento di webfont non Google), consulta [CSS personalizzato](/it/customization/custom-css#font-esterni).
## Colori personalizzati
Sostituisci la tavolozza predefinita per adattarla all'identità del tuo brand:
```json
{
"theme": "jam",
"colors": {
"primary": "#635BFF",
"light": "#7C75FF",
"dark": "#4F46E5"
}
}
```
| Colore | Utilizzo |
|-------|-------|
| `primary` | Link, pulsanti, elementi in evidenza |
| `light` | Stati al passaggio del mouse, evidenziazioni |
| `dark` | Stati attivi, elementi in evidenza della modalità scura |
I colori diventano effettivi dopo la build successiva. Durante lo sviluppo locale, riavvia il server di sviluppo per vedere le modifiche.
Usa uno strumento per i colori come [Coolors](https://coolors.co) o [Realtime Colors](https://realtimecolors.com) per generare una tavolozza armoniosa.
**Ti serve qualcosa oltre ai colori?** [CSS personalizzato](/it/customization/custom-css) ti consente di sostituire caratteri, spaziatura, larghezza del contenuto, raggi dei bordi, stili dei riquadri informativi e dettagli a livello di componente. I temi impostano i valori predefiniti; il CSS personalizzato è la soluzione per tutto ciò che CSS può modificare.
## 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 tavolozza dei colori si adatta automaticamente.
Imposta 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 i visitatori alla prima visita |
| `strict` | boolean | `false` | Quando è `true`, nasconde l'interruttore nella barra di navigazione, così i visitatori restano su `default` |
Imposta solo `default` per suggerire una modalità iniziale consentendo comunque agli utenti di cambiarla. Aggiungi `strict: true` per rimuovere completamente l'interruttore e bloccare il sito su quella modalità.
Per testare 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 un controllo dettagliato degli stili della modalità scura, usa [CSS personalizzato](/it/customization/custom-css).
## Qual è il prossimo passo?
Personalizza loghi, colori e favicon
Sostituisci gli stili del tema con il tuo CSS
Configura tab, gruppi e struttura delle pagine