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 dal vivo

{
  "theme": "jam"
}

Tipografia

Ogni tema include caratteri caricati da Google Fonts:

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:

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

Usa caratteri separati per le intestazioni e il corpo:

{
  "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:

{
  "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:

{
  "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.

Colori personalizzati

Sostituisci la tavolozza 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 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:

{
  "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 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.

Qual è il prossimo passo?