Personalizzare il tema¶

Questa guida accompagna nella personalizzazione dell'aspetto visivo del Navigator. Per i dettagli sull'interfaccia dell'editor, vedi Interfaccia del Theme Editor.

Workflow consigliato¶

1. Aprire il Theme Editor (http://localhost:8000/theme-editor.html)
2. Partire dal tema predefinito o caricarne uno esistente con Open
3. Modificare le impostazioni verificando l'effetto nell'anteprima
4. Salvare con Save e copiare il file nella cartella del progetto
5. Aggiornare config.json per puntare al nuovo tema
6. Verificare nel Navigator reale con uno scenario completo

L'anteprima del Theme Editor usa uno scenario semplificato. Per vedere il risultato finale con contenuti reali, è necessario testare nel Navigator.

Consigli per il branding¶

Logo¶

Evitare immagini troppo grandi: il logo viene ridimensionato automaticamente ma file pesanti rallentano il caricamento. Dimensione consigliata: massimo 200x60 pixel o equivalente.

Il campo accetta sia URL esterni (https://azienda.com/logo.png) sia percorsi relativi (images/logo.png). Per progetti distribuibili, preferire percorsi relativi.

Consigli per la tipografia¶

"System Default" non carica font esterni: usa quello del dispositivo dell'utente. È la scelta più leggera e garantisce leggibilità su qualsiasi sistema.

Consigli per i colori¶

Contrasto¶

Il testo deve essere leggibile sullo sfondo. Combinazioni sicure:

Colore accent¶

Il colore accent definisce la personalità dell'interfaccia. Usare il colore principale del brand aziendale per coerenza visiva. Verificare che sia sufficientemente saturo da risaltare come elemento interattivo.

Stati dei pulsanti¶

La distinzione cromatica tra pulsanti aiuta l'utente a orientarsi:

• Scelte disponibili: colore accent, invita all'azione
• Scelte già fatte: colore diverso (verde predefinito), conferma visiva
• Scelte esplorate: grigio neutro, indica "già visto in un altro percorso"

Mantenere coerenza tra i colori dei pulsanti e quelli della mappa per un linguaggio visivo uniforme.

Salvare e applicare¶

Il pulsante Save genera un file JSON. Rinominarlo con un nome descrittivo:

theme-azienda-2024.json
theme-corso-sicurezza.json
theme-dark.json

Per applicare il tema, aggiornare config.json:

{
    "scenario": "scenario-corso.json",
    "theme": "theme-azienda-2024.json",
    "showCredits": false
}

Ricaricare il Navigator (Ctrl+Shift+R) per vedere il tema applicato.

Gestire temi multipli¶

È possibile creare più temi per contesti diversi:

• Varianti di luminosità: tema chiaro e tema scuro
• Clienti diversi: un tema per ogni cliente con il suo branding
• Contesti diversi: tema formale per compliance, tema vivace per onboarding

Cambiando il valore theme in config.json si passa da un tema all'altro senza modificare lo scenario. Lo stesso contenuto può avere aspetti completamente diversi.

Modificare il tema via JSON¶

Per chi preferisce lavorare direttamente sul file, la struttura è:

{
    "brand": {
        "name": "Nome Azienda",
        "logo": "images/logo.png",
        "website": "https://esempio.com"
    },
    "typography": {
        "fontFamily": "inter"
    },
    "colors": {
        "background": "#ffffff",
        "text": "#1f2937",
        "textSecondary": "#4b5563",
        "accent": "#6366f1"
    },
    "buttons": {
        "choiceBackground": "#6366f1",
        "choiceText": "#ffffff",
        "visitedBackground": "#10b981",
        "visitedText": "#ffffff",
        "exploredBackground": "#e5e7eb",
        "exploredText": "#374151",
        "restartBackground": "#f59e0b",
        "restartText": "#ffffff"
    },
    "map": {
        "nodeCurrent": "#6366f1",
        "nodeCurrentText": "#ffffff",
        "nodeVisited": "#3730a3",
        "nodeVisitedText": "#ffffff",
        "nodeUnvisited": "#f3f4f6",
        "nodeUnvisitedText": "#6b7280",
        "nodeUnvisitedBorder": "#d1d5db",
        "lineVisited": "#6366f1",
        "lineUnvisited": "#d1d5db"
    }
}

Tutti i campi sono opzionali. I valori mancanti vengono presi da defaults.json. Questo permette di creare temi minimali che specificano solo ciò che cambia:

{
    "brand": {
        "name": "Azienda XYZ",
        "logo": "images/logo-xyz.png"
    },
    "colors": {
        "accent": "#dc2626"
    }
}

Valori disponibili per fontFamily: system, inter, roboto, open-sans, lato, montserrat, poppins, source-sans-3, nunito.