Temi

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.

{
  "theme": "jam"
}

Temi disponibili

JamNebulaPulsarHalo

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

Visualizza esempio live

{
  "theme": "jam"
}

Tipografia

Ogni tema include font caricati da Google Fonts:

Consigliamo i valori predefiniti, ottimizzati per ogni tema. Se vuoi un aspetto diverso, imposta fonts in docs.json per usare un Google Font in tutto il sito:

{
  "fonts": {
    "family": "Lora"
  }
}

Usa font separati per le intestazioni e il corpo:

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

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

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

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

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

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

Per qualsiasi configurazione oltre al campo fonts (sostituire i font del codice, modificare i pesi per ogni livello di intestazione o caricare webfont non Google), consulta CSS personalizzato.

Colori personalizzati

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

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

Modalità scura

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

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

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

Imposta solo default per suggerire una modalità iniziale consentendo comunque agli utenti di cambiarla. Aggiungi strict: true per rimuovere completamente il selettore e bloccare il sito su quella modalità.

Per testare la modalità scura durante lo sviluppo, usa il selettore nella barra di navigazione oppure simula la modalità 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.

Qual è il prossimo passo?