Home
Docs
Installazione e configurazione
Sviluppatore
Versione di Docker
Modificare i temi dell'interfaccia in ONLYOFFICE Docs

Questo articolo è stato tradotto dall’AI

Modificare i temi dell'interfaccia in ONLYOFFICE Docs

Introduzione

Oltre ai temi di interfaccia disponibili chiaro, classico chiaro e scuro, gli editor di ONLYOFFICE possono ora essere personalizzati con il tuo tema colore. Segui i passaggi di questa guida per imparare come farlo.

La possibilità di aggiungere temi di interfaccia personalizzati è disponibile a partire da ONLYOFFICE Docs v7.0.

Crea il file .json che avrà questo aspetto:
```
{
    "name": "Tema fantastico",
    "l10n": {
        "fr": "Thème incroyable",
        "de": "Geweldig thema"
      },
    "id" : "theme-amazing",
    "type" : "light",
    "colors" : {
        "toolbar-header-document" :  "#446995",
        "toolbar-header-spreadsheet" : "#40865c",
        "toolbar-header-presentation" : "#aa5252",
        "border-color-shading" : "rgba(0, 0, 0, 0.15)"
        ...
    }
}
                
```
dove è necessario specificare i seguenti parametri:
- name: Definisce il nome del tema che verrà visualizzato nel selettore temi delle impostazioni avanzate.
- l10n: Definisce il nome localizzato del tema. Le chiavi dell'oggetto sono i codici lingua a due lettere (ru, de, it, ecc.) e i valori sono la traduzione del nome del tema per ciascuna lingua.
- id: Definisce l'identificatore univoco del tema, che deve iniziare con il prefisso theme-. Può contenere i segni a-Z, 1-9, -, _.
- type: Definisce il tipo di tema, che può essere scuro o chiaro.
- colors: Definisce il set di colori del tema. I colori possono essere presentati nei formati hex o RGBA. Vedi colori per i dettagli sulle variabili di colore che questo oggetto può contenere.
Inserisci il file creato nella seguente directory:
- Windows: %ProgramFiles%\ONLYOFFICE\DocumentServer\web-apps\apps\common\main\resources\themes
- Linux: /var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes
- Docker: Copia il file nel container Docs: sudo docker cp /home/username/folder_name/file_name {container_id}:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes
La cache sul server per questa richiesta ha una durata di 5 minuti, quindi il tema sarà disponibile dopo 5 minuti. Sarà necessario aggiornare la pagina dell'editor.

In alcuni casi, potrebbe essere necessario anche riavviare i servizi e cancellare la cache. Per ulteriori dettagli su come cancellare la cache del server, puoi fare riferimento alla sezione Risoluzione dei problemi per Linux, o Docker.
Ora il tema verrà visualizzato nell'elenco Tema interfaccia delle Impostazioni avanzate e potrai applicarlo all'interfaccia dell'editor.

Colori

Colori della barra degli strumenti dell'intestazione

Parametro	Descrizione	Predefinito
`toolbar-header-document`	Il colore dell'intestazione della barra degli strumenti per i documenti di testo.	`#446995`
`toolbar-header-spreadsheet`	Il colore dell'intestazione della barra degli strumenti per i fogli di calcolo.	`#40865c`
`toolbar-header-presentation`	Il colore dell'intestazione della barra degli strumenti per le presentazioni.	`#BE664F`
`toolbar-header-pdf`	Il colore dell'intestazione della barra degli strumenti per i PDF.	`#AA5252`
`text-toolbar-header-on-background-document`	Il colore del testo delle iniziali dell'utente dall'intestazione della barra degli strumenti dei documenti di testo.	`#38567A`
`text-toolbar-header-on-background-spreadsheet`	Il colore del testo delle iniziali dell'utente dall'intestazione della barra degli strumenti dei fogli di calcolo.	`#336B49`
`text-toolbar-header-on-background-presentation`	Il colore del testo delle iniziali dell'utente dall'intestazione della barra degli strumenti delle presentazioni.	`#854535`
`text-toolbar-header-on-background-pdf`	Il colore del testo delle iniziali dell'utente dall'intestazione della barra degli strumenti dei PDF.	`#8D4444`

Colori di sfondo

Parametro	Descrizione	Predefinito
`background-normal`	Il colore di sfondo delle finestre, pannelli a discesa, controlli regolari.	`#fff`
`background-toolbar`	Il colore di sfondo della barra degli strumenti, di tutti i pannelli, dell'intestazione delle finestre di dialogo, dei pannelli con pulsanti nel canvas (intestazioni dei controlli di contenuto, pulsanti per opzioni di inserimento o correzione automatica).	`#f7f7f7`
`background-toolbar-additional`	Il colore di sfondo aggiuntivo della barra degli strumenti. Viene utilizzato per i fogli inattivi nei fogli di calcolo.	`#efefef`
`background-primary-dialog-button`	Il colore di sfondo del pulsante principale della finestra di dialogo.	`#444`
`background-accent-button`	Il colore di sfondo del pulsante di accento nell'editor di documenti di testo.	`#446995`
`background-tab-underline`	Il colore di sfondo della sottolineatura della scheda per la barra degli strumenti grigia.	`#444`
`background-notification-popover`	Il colore di sfondo del popover di notifica (ad esempio, per la modalità revisione, compilazione moduli, ecc.).	`#fcfed7`
`background-notification-badge`	Il colore di sfondo delle icone di notifica nella barra degli strumenti o nel pannello laterale sinistro.	`#ffd112`
`background-scrim`	Il colore dello scrim che riduce l'intensità dello sfondo delle finestre modali.	`rgba(0, 0, 0, 0.2)`
`background-loader`	Il colore di sfondo del caricatore.	`rgba(24, 24, 24, 0.9)`
`background-alt-key-hint`	Il colore di sfondo dei suggerimenti di scorciatoia dei pulsanti quando si preme il tasto Alt.	`#FFD938`
`background-contrast-popover`	Il colore di sfondo dei suggerimenti informativi.	`#fff`
`background-fill-button`	Il colore di sfondo del pulsante nella testata del modulo.	`#FFD112`
`shadow-contrast-popover`	Il colore di sfondo dell'ombra del suggerimento informativo.	`rgba(0, 0, 0, 0.3)`

Colori di evidenziazione

Parametro	Descrizione	Predefinito
`highlight-button-hover`	Il colore di evidenziazione dei pulsanti, degli elementi del menu a discesa e di altre liste interattive al passaggio del mouse.	`#e0e0e0`
`highlight-button-pressed`	Il colore di evidenziazione del pulsante premuto.	`#cbcbcb`
`highlight-button-pressed-hover`	Il colore di evidenziazione del pulsante premuto al passaggio del mouse.	`#bababa`
`highlight-primary-dialog-button-hover`	Il colore di evidenziazione del pulsante principale del dialogo al passaggio del mouse.	`#1c1c1c`
`highlight-accent-button-hover`	Il colore di evidenziazione del pulsante di accento al passaggio del mouse.	`#375478`
`highlight-accent-button-pressed`	Il colore di evidenziazione del pulsante di accento premuto.	`#293f59`
`highlight-header-button-hover`	Il colore di evidenziazione del pulsante della testata al passaggio del mouse.	`rgba(255, 255, 255, 0.15)`
`highlight-header-button-pressed`	Il colore di evidenziazione del pulsante della testata premuto.	`rgba(255, 255, 255, 0.25)`
`highlight-toolbar-tab-underline`	Il colore di evidenziazione della sottolineatura della scheda attiva per la barra degli strumenti grigia.	`#444`
`highlight-text-select`	Il colore di evidenziazione del testo selezionato nei controlli regolari.	`#3494fb`
`highlight-fill-button-hover`	Il colore di evidenziazione del pulsante della testata del modulo al passaggio del mouse.	`#FFE165`
`highlight-fill-button-pressed`	Il colore di sfondo del pulsante premuto nella testata del modulo.	`#DFB500`

Colori dei bordi

Parametro	Descrizione	Predefinito
`border-toolbar`	Il colore del bordo della barra degli strumenti, dei pannelli e delle finestre modali.	`#cbcbcb`
`border-toolbar-active-panel-top`	Il colore del bordo del pannello attivo della barra degli strumenti superiore.	`#f7f7f7`
`border-divider`	Il colore dei bordi che dividono gli elementi della barra degli strumenti e del pannello.	`#dfdfdf`
`border-regular-control`	Il colore del bordo dei controlli regolari.	`#c0c0c0`
`border-toolbar-button-hover`	Il colore generale del bordo per i pulsanti della barra degli strumenti quando sono raggruppati e in stato di hover.	`#e0e0e0`
`border-preview-hover`	Il colore del bordo dell'elemento del controllo di anteprima in stato di hover (anteprima slide, stili della barra degli strumenti).	`#bababa`
`border-preview-select`	Il colore del bordo dell'elemento premuto del controllo di anteprima (anteprima slide, stili della barra degli strumenti).	`#888`
`border-control-focus`	Il colore del bordo del controllo regolare focalizzato.	`#848484`
`border-color-shading`	Il colore del bordo dei colori della palette.	`rgba(0, 0, 0, 0.15)`
`border-error`	Il colore del bordo delle caselle di input quando viene inserito un valore non valido.	`#f62211`
`border-contrast-popover`	Il colore del bordo del suggerimento informativo.	`#fff`
`border-button-pressed-focus`	Il colore del bordo del pulsante premuto e focalizzato.	`#848484`

Colori del testo

Parametro	Descrizione	Predefinito
`text-normal`	Il colore del testo di default.	`rgba(0, 0, 0, 0.8)`
`text-normal-pressed`	Il colore del testo dell'elemento attivo (della scheda selezionata, del pulsante premuto, ecc.).	`rgba(0, 0, 0, 0.8)`
`text-secondary`	Il colore secondario del testo (note, spiegazioni, ecc.).	`rgba(0, 0, 0, 0.6)`
`text-tertiary`	Il colore terziario del testo (segnaposto).	`rgba(0, 0, 0, 0.4)`
`text-link`	Il colore del testo dei link e dei pulsanti di link nei popover di notifica.	`#445799`
`text-link-hover`	Il colore del testo dei link e dei pulsanti di link nei popover di notifica in stato di hover.	`#445799`
`text-link-active`	Il colore del testo dei link premuti e dei pulsanti di link nei popover di notifica.	`#445799`
`text-link-visited`	Il colore del testo dei link visitati e dei pulsanti di link nei popover di notifica.	`#445799`
`text-inverse`	Il colore del testo sullo sfondo invertito della barra degli strumenti.	`#fff`
`text-toolbar-header`	Il colore del testo dell'intestazione della barra degli strumenti.	`#fff`
`text-contrast-background`	Il colore del testo per lo sfondo a contrasto (caricatore, titoli delle celle nelle visualizzazioni predefinite dei fogli).	`#fff`
`text-alt-key-hint`	Il colore del testo dei suggerimenti di scorciatoia dei pulsanti quando viene premuto il tasto Alt.	`rgba(0, 0, 0, 0.8)`

Colori delle icone

Parametro	Descrizione	Predefinito
`icon-normal`	Il colore dell'icona.	`#444`
`icon-normal-pressed`	Il colore dell'icona degli elementi attivi (scheda selezionata, pulsante premuto, ecc.).	`#444`
`icon-inverse`	Il colore invertito dell'icona (attualmente non utilizzato nell'interfaccia).	`#fff`
`icon-toolbar-header`	Il colore dell'icona dalla barra degli strumenti (ad esempio, un'icona con le iniziali dell'utente).	`#fff`
`icon-notification-badge`	Il colore dell'icona dei badge di notifica dalla barra degli strumenti o dal pannello laterale sinistro.	`#000`
`icon-contrast-popover`	Il colore dell'icona per i suggerimenti informativi di contrasto (attualmente non utilizzato nell'interfaccia).	`#fff`
`icon-success`	Il colore delle caselle di controllo dei commenti risolti o altre indicazioni di successo.	`#090`

Colore della tela

Parametro	Descrizione	Predefinito
`canvas-background`	Il colore di sfondo dell'area di lavoro dietro la pagina del documento, il foglio o la diapositiva, lo sfondo dell'intestazione della colonna e lo sfondo dell'interfaccia di raggruppamento delle colonne nei fogli di calcolo.	`#eee`
`canvas-content-background`	Il colore di sfondo della pagina del documento, delle celle o della diapositiva.	`#fff`
`canvas-page-border`	Il colore del bordo della pagina del documento.	`#ccc`
`canvas-ruler-background`	Il colore di sfondo del righello.	`#fff`
`canvas-ruler-border`	Il colore del bordo del righello.	`#cbcbcb`
`canvas-ruler-margins-background`	Il colore di sfondo dei margini del righello.	`#d9d9d9`
`canvas-ruler-mark`	Il colore dei segni del righello (bersaglio e testo).	`#555`
`canvas-ruler-handle-border`	Il colore del bordo della maniglia del righello.	`#555`
`canvas-ruler-handle-border-disabled`	Il colore del bordo della maniglia del righello disabilitato.	`#aaa`
`canvas-high-contrast`	Il colore degli elementi ad alto contrasto (segni delle schede sul righello, simboli delle celle raggruppate).	`#000`
`canvas-high-contrast-disabled`	Il colore degli elementi ad alto contrasto disabilitati (segni delle schede sul righello, simboli delle celle raggruppate).	`#666`
`canvas-cell-border`	Il colore del bordo della cella.	`rgba(0, 0, 0, 0.1)`
`canvas-cell-title-text`	Il colore del testo del titolo della cella.	`#444`
`canvas-cell-title-background`	Il colore di sfondo del titolo della cella.	`#f7f7f7`
`canvas-cell-title-background-hover`	Il colore di sfondo del titolo della cella al passaggio del mouse.	`#dfdfdf`
`canvas-cell-title-background-selected`	Il colore di sfondo del titolo della cella selezionata.	`#cfcfcf`
`canvas-cell-title-border`	Il colore del bordo del titolo della cella.	`#d8d8d8`
`canvas-cell-title-border-hover`	Il colore del bordo del titolo della cella al passaggio del mouse.	`#c9c9c9`
`canvas-cell-title-border-selected`	Il colore del bordo del titolo della cella selezionata.	`#bbb`
`canvas-scroll-thumb`	Il colore del cursore di scorrimento.	`#f1f1f1`
`canvas-scroll-thumb-hover`	Il colore del cursore di scorrimento al passaggio del mouse.	`#cfcfcf`
`canvas-scroll-thumb-pressed`	Il colore del cursore di scorrimento premuto.	`#adadad`
`canvas-scroll-thumb-border`	Il colore del bordo del cursore di scorrimento.	`#cfcfcf`
`canvas-scroll-thumb-border-hover`	Il colore del bordo del cursore di scorrimento al passaggio del mouse.	`#cfcfcf`
`canvas-scroll-thumb-border-pressed`	Il colore del bordo del cursore di scorrimento premuto.	`#adadad`
`canvas-scroll-arrow`	Il colore della freccia di scorrimento.	`#adadad`
`canvas-scroll-arrow-hover`	Il colore della freccia di scorrimento al passaggio del mouse.	`#f1f1f1`
`canvas-scroll-arrow-pressed`	Il colore della freccia di scorrimento premuta.	`#f1f1f1`
`canvas-scroll-thumb-target`	Il colore di destinazione del cursore di scorrimento.	`#cfcfcf`
`canvas-scroll-thumb-target-hover`	Il colore di destinazione del cursore di scorrimento al passaggio del mouse.	`#f1f1f1`
`canvas-scroll-thumb-target-pressed`	Il colore di destinazione del cursore di scorrimento premuto.	`#f1f1f1`
`canvas-sheet-view-cell-background`	Il colore di sfondo della cella in modalità Visualizzazione Foglio.	`#73bf91`
`canvas-sheet-view-cell-background-hover`	Il colore di sfondo della cella in modalità Visualizzazione Foglio al passaggio del mouse.	`#97e3b6`
`canvas-sheet-view-cell-background-pressed`	Il colore di sfondo della cella premuta in modalità Visualizzazione Foglio.	`#aaffcc`
`canvas-sheet-view-cell-title-label`	Il colore del testo della cella in modalità Visualizzazione Foglio.	`#121212`
`canvas-sheet-view-select-all-icon`	Il colore dell'icona Seleziona tutte le celle in modalità Visualizzazione Foglio.	`#3d664e`
`canvas-freeze-line-1px`	Il colore della linea di congelamento con ombra.	`#818181`
`canvas-freeze-line-2px`	Il colore della linea di congelamento senza ombra.	`#aaaaaa`
`canvas-select-all-icon`	Il colore dell'icona Seleziona tutte le celle.	`#82878f`