Temi
Scegli un tema integrato (Jam, Nebula, Pulsar, Halo o Dusk) per tipografia, layout, spaziatura e modalità scura; adatta i colori al tuo brand.
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.
{
"theme": "jam"
}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.
Temi disponibili
Il tema predefinito. Layout con logo nell'intestazione e sfondo con gradiente radiale derivato dal colore principale. Bordi arrotondati (6-24px).
{
"theme": "jam"
}Tipografia
Ogni tema include font caricati da Google Fonts:
| Tema | Intestazioni | Corpo | Codice |
|---|---|---|---|
| Jam | Inter | Inter | JetBrains Mono |
| Nebula | IBM Plex Mono | IBM Plex Mono | IBM Plex Mono |
| Pulsar | Inter | Inter | JetBrains Mono |
| Halo | Figtree | Figtree | JetBrains Mono |
| Dusk | 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:
{
"fonts": {
"family": "Lora"
}
}Usa font separati per le intestazioni e il corpo del testo:
{
"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:
{
"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:
{
"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.
Colori personalizzati
Sovrascrivi la palette predefinita per adattarla all'identità del tuo brand:
{
"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 |
I colori vengono applicati dopo il build successivo. Durante lo sviluppo locale, riavvia il server dev per visualizzare le modifiche.
Usa uno strumento per i colori come Coolors o Realtime Colors per generare una palette armoniosa.
Ti serve altro oltre ai colori? CSS personalizzato 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.
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:
{
"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:
- Apri DevTools
- Premi Cmd+Shift+P (Mac) o Ctrl+Shift+P (Windows)
- Cerca "Emulate CSS prefers-color-scheme: dark"
Per controllare con precisione gli stili della modalità scura, usa CSS personalizzato.