> ## Documentation Index
> Fetch the complete documentation index at: https://docs.agencyhandy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalizza le combinazioni di colori del tuo workspace AgencyHandy

> Applica i colori del tuo brand alla barra laterale e all'interfaccia di AgencyHandy — colore primario, sfondo, testo e stati hover — visibili immediatamente a tutti gli utenti.

Le impostazioni Aspetto ti danno il pieno controllo sull'aspetto del tuo workspace AgencyHandy. Puoi allineare la combinazione di colori della piattaforma all'identità del brand della tua agenzia personalizzando il colore primario, lo sfondo della barra laterale, il colore del testo della barra laterale e il colore di evidenziazione al passaggio del cursore per gli elementi di navigazione della barra laterale. Ogni modifica salvata ha effetto immediato nell'intero workspace per tutti gli utenti — senza bisogno di aggiornare la pagina.

<Note>
  Solo i **Super Admin** e gli **Admin** possono accedere e modificare le impostazioni Aspetto. Se non vedi questa opzione sotto **Workspace Config**, chiedi al tuo Super Admin di rivedere il tuo ruolo.
</Note>

## Accesso alle impostazioni Aspetto

<Steps>
  <Step title="Apri Workspace Config">
    Dal menu di navigazione a sinistra, clicca su **Workspace Config**.
  </Step>

  <Step title="Seleziona Aspetto">
    Clicca su **Appearance** (a volte denominato **Visual Settings**) nel sottomenu.
  </Step>
</Steps>

***

## Personalizzazione di ogni elemento visivo

### Colore primario

Il colore primario viene applicato ai pulsanti, ai link attivi, agli stati evidenziati e agli elementi chiave dell'interfaccia in tutta la piattaforma.

* Scegli un colore che rifletta la tua identità di brand principale.
* Questa è l'impostazione di colore più impattante perché appare ovunque nell'interfaccia utente.

### Colore di sfondo della barra laterale

Lo sfondo della barra laterale imposta la tonalità di base del pannello di navigazione a sinistra.

* Usa un colore che crei una chiara separazione visiva tra la barra laterale e l'area del contenuto principale.
* Gli sfondi scuri con testo chiaro funzionano generalmente meglio per la leggibilità.

### Colore del testo della barra laterale

Il colore del testo della barra laterale controlla il colore delle label per tutti gli elementi di navigazione nel menu a sinistra.

* Scegli sempre un colore che abbia un contrasto marcato rispetto al colore di sfondo della barra laterale.
* Un contrasto insufficiente rende i link più difficili da leggere e riduce l'accessibilità.

### Colore di sfondo hover della barra laterale

Questo colore appare come evidenziazione dello sfondo quando un utente sposta il cursore su un elemento di navigazione della barra laterale.

* Segnala l'interattività e aiuta gli utenti a capire su quale elemento stanno per cliccare.
* Scegli un colore chiaramente distinto sia dallo sfondo predefinito della barra laterale che dal colore dell'elemento attivo.

***

## Applicazione delle scelte di colore

<Steps>
  <Step title="Apri il selettore di colore per ogni campo">
    Clicca sul campione di colore accanto a uno qualsiasi dei quattro campi dell'aspetto — Colore primario, Sfondo barra laterale, Colore testo barra laterale o Colore sfondo hover barra laterale — per aprire il selettore di colore.
  </Step>

  <Step title="Inserisci un codice hex o scegli un colore">
    Digita il codice hex esatto del tuo brand (es. `#3B5BDB`) direttamente nel campo di inserimento, oppure usa il selettore visivo per scegliere una tonalità.
  </Step>

  <Step title="Anteprima delle modifiche">
    Controlla come appaiono i colori aggiornati nella barra laterale e nell'interfaccia prima di salvare.
  </Step>

  <Step title="Clicca su Save Changes">
    Quando sei soddisfatto del risultato, clicca su **Save Changes**. L'aspetto aggiornato viene applicato globalmente e istantaneamente a tutti gli utenti nel workspace.
  </Step>
</Steps>

<Tip>
  Tieni un registro dei codici hex del brand della tua agenzia in un posto accessibile (una guida allo stile del brand o un file di appunti). Vorrai riutilizzare gli stessi valori esatti in modo coerente — specialmente se devi mai reimpostare e riconfigurare le impostazioni dell'aspetto.
</Tip>

***

## Ripristino del tema predefinito

Se vuoi rimuovere tutto il branding personalizzato e ripristinare la combinazione di colori originale di AgencyHandy, clicca sul pulsante **Reset Default Settings** nella pagina Aspetto.

<Warning>
  Il ripristino dei valori predefiniti elimina definitivamente tutte le modifiche ai colori personalizzati. Questa azione non può essere annullata. Se vuoi conservare le impostazioni attuali, annota i tuoi codici hex prima di ripristinare.
</Warning>

***

## Buone pratiche per il contrasto dei colori

Un buon contrasto cromatico non è solo una preferenza di design — influisce direttamente sulla leggibilità e sull'accessibilità per il tuo team e i tuoi clienti.

<CardGroup cols={2}>
  <Card title="Punta ai rapporti di contrasto WCAG AA" icon="eye">
    Per il testo normale, usa un rapporto di contrasto di almeno **4,5:1** tra testo e sfondo. Per testo grande o icone, un rapporto di **3:1** è accettabile. Usa uno strumento come [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) per verificarlo.
  </Card>

  <Card title="Evita combinazioni a basso contrasto" icon="triangle-exclamation">
    Non abbinare colori come testo grigio chiaro su bianco, o testo giallo su bianco — questi non soddisfano gli standard di accessibilità e affaticano gli occhi nelle sessioni prolungate.
  </Card>

  <Card title="Testa deliberatamente gli stati hover" icon="arrow-pointer">
    I colori hover devono essere visibilmente diversi sia dallo stato normale che da quello attivo. Se appaiono uguali, gli utenti perdono un importante feedback visivo.
  </Card>

  <Card title="Rimani coerente con il tuo brand" icon="paintbrush">
    Usa lo stesso colore primario qui come sul tuo sito web, nelle proposte e nelle fatture. La coerenza costruisce riconoscimento e professionalità in tutti i punti di contatto con i clienti.
  </Card>
</CardGroup>

***

## Note importanti

* **Effetto globale immediato:** tutte le modifiche all'aspetto salvate vengono applicate immediatamente nell'intero workspace. Ogni utente connesso vede l'aggiornamento alla successiva azione di navigazione.
* **Un solo tema attivo:** non è supportata la gestione di più temi — un set di colori si applica all'intero workspace per tutti i ruoli.
* **Restrizione per ruolo:** solo i Super Admin e gli Admin possono apportare modifiche all'aspetto. I membri del team regolari e i clienti non possono modificare i colori.
* **Il ripristino è permanente:** il pulsante **Reset Default Settings** non può essere annullato, quindi usalo solo quando intendi deliberatamente rimuovere tutti i colori personalizzati.