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.

note

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

1. Crea il file .json che avrà questo aspetto:

   {
       "name": "Amazing theme",
       "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.

2. 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

3. 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.

   note

   In alcuni casi, potrebbe essere necessario anche riavviare i servizi e cancellare la cache.

4. 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

toolbar-header-document

Il colore dell'intestazione della barra degli strumenti per i documenti di testo.

Predefinito: #446995

toolbar-header-spreadsheet

Il colore dell'intestazione della barra degli strumenti per i fogli di calcolo.

Predefinito: #40865c

toolbar-header-presentation

Il colore dell'intestazione della barra degli strumenti per le presentazioni.

Predefinito: #BE664F

toolbar-header-pdf

Il colore dell'intestazione della barra degli strumenti per i PDF.

Predefinito: #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.

Predefinito: #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.

Predefinito: #336B49

text-toolbar-header-on-background-presentation

Il colore del testo delle iniziali dell'utente dall'intestazione della barra degli strumenti delle presentazioni.

Predefinito: #854535

text-toolbar-header-on-background-pdf

Il colore del testo delle iniziali dell'utente dall'intestazione della barra degli strumenti dei PDF.

Predefinito: #8D4444

Colori di sfondo

background-normal

Il colore di sfondo delle finestre, pannelli a discesa, controlli regolari.

Predefinito: #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).

Predefinito: #f7f7f7

background-toolbar-additional

Il colore di sfondo aggiuntivo della barra degli strumenti. Viene utilizzato per i fogli inattivi nei fogli di calcolo.

Predefinito: #efefef

background-primary-dialog-button

Il colore di sfondo del pulsante principale della finestra di dialogo.

Predefinito: #444

background-accent-button

Il colore di sfondo del pulsante di accento nell'editor di documenti di testo.

Predefinito: #446995

background-tab-underline

Il colore di sfondo della sottolineatura della scheda per la barra degli strumenti grigia.

Predefinito: #444

background-notification-popover

Il colore di sfondo del popover di notifica (ad esempio, per la modalità revisione, compilazione moduli, ecc.).

Predefinito: #fcfed7

background-notification-badge

Il colore di sfondo delle icone di notifica nella barra degli strumenti o nel pannello laterale sinistro.

Predefinito: #ffd112

background-scrim

Il colore dello scrim che riduce l'intensità dello sfondo delle finestre modali.

Predefinito: rgba(0, 0, 0, 0.2)

background-loader

Il colore di sfondo del caricatore.

Predefinito: 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.

Predefinito: #FFD938

background-contrast-popover

Il colore di sfondo dei suggerimenti informativi.

Predefinito: #fff

background-fill-button

Il colore di sfondo del pulsante nella testata del modulo.

Predefinito: #FFD112

shadow-contrast-popover

Il colore di sfondo dell'ombra del suggerimento informativo.

Predefinito: rgba(0, 0, 0, 0.3)

Colori di evidenziazione

highlight-button-hover

Il colore di evidenziazione dei pulsanti, degli elementi del menu a discesa e di altre liste interattive al passaggio del mouse.

Predefinito: #e0e0e0

highlight-button-pressed

Il colore di evidenziazione del pulsante premuto.

Predefinito: #cbcbcb

highlight-button-pressed-hover

Il colore di evidenziazione del pulsante premuto al passaggio del mouse.

Predefinito: #bababa

highlight-primary-dialog-button-hover

Il colore di evidenziazione del pulsante principale della finestra di dialogo al passaggio del mouse.

Predefinito: #1c1c1c

highlight-accent-button-hover

Il colore di evidenziazione del pulsante di accento al passaggio del mouse.

Predefinito: #375478

highlight-accent-button-pressed

Il colore di evidenziazione del pulsante di accento premuto.

Predefinito: #293f59

highlight-header-button-hover

Il colore di evidenziazione del pulsante della testata al passaggio del mouse.

Predefinito: rgba(255, 255, 255, 0.15)

highlight-header-button-pressed

Il colore di evidenziazione del pulsante della testata premuto.

Predefinito: 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.

Predefinito: #444

highlight-text-select

Il colore di evidenziazione del testo selezionato nei controlli regolari.

Predefinito: #3494fb

highlight-fill-button-hover

Il colore di evidenziazione del pulsante della testata del modulo al passaggio del mouse.

Predefinito: #FFE165

highlight-fill-button-pressed

Il colore di sfondo del pulsante premuto nella testata del modulo.

Predefinito: #DFB500

Colori dei bordi

border-toolbar

Il colore del bordo della barra degli strumenti, dei pannelli e delle finestre modali.

Predefinito: #cbcbcb

border-toolbar-active-panel-top

Il colore del bordo del pannello attivo della barra degli strumenti superiore.

Predefinito: #f7f7f7

border-divider

Il colore dei bordi che dividono gli elementi della barra degli strumenti e del pannello.

Predefinito: #dfdfdf

border-regular-control

Il colore del bordo dei controlli regolari.

Predefinito: #c0c0c0

border-toolbar-button-hover

Il colore generale del bordo per i pulsanti della barra degli strumenti quando sono raggruppati e al passaggio del mouse.

Predefinito: #e0e0e0

border-preview-hover

Il colore del bordo dell'elemento del controllo di anteprima al passaggio del mouse (anteprima slide, stili della barra degli strumenti).

Predefinito: #bababa

border-preview-select

Il colore del bordo dell'elemento premuto del controllo di anteprima (anteprima slide, stili della barra degli strumenti).

Predefinito: #888

border-control-focus

Il colore del bordo del controllo regolare focalizzato.

Predefinito: #848484

border-color-shading

Il colore del bordo dei colori della palette.

Predefinito: rgba(0, 0, 0, 0.15)

border-error

Il colore del bordo delle caselle di input quando viene inserito un valore non valido.

Predefinito: #f62211

border-contrast-popover

Il colore del bordo del suggerimento informativo.

Predefinito: #fff

border-button-pressed-focus

Il colore del bordo del pulsante premuto e focalizzato.

Predefinito: #848484

Colori del testo

text-normal

Il colore del testo di default.

Predefinito: rgba(0, 0, 0, 0.8)

text-normal-pressed

Il colore del testo dell'elemento attivo (della scheda selezionata, del pulsante premuto, ecc.).

Predefinito: rgba(0, 0, 0, 0.8)

text-secondary

Il colore secondario del testo (note, spiegazioni, ecc.).

Predefinito: rgba(0, 0, 0, 0.6)

text-tertiary

Il colore terziario del testo (segnaposto).

Predefinito: rgba(0, 0, 0, 0.4)

text-link

Il colore del testo dei link e dei pulsanti di link nei popover di notifica.

Predefinito: #445799

text-link-hover

Il colore del testo dei link e dei pulsanti di link nei popover di notifica in stato di hover.

Predefinito: #445799

text-link-active

Il colore del testo dei link premuti e dei pulsanti di link nei popover di notifica.

Predefinito: #445799

text-link-visited

Il colore del testo dei link visitati e dei pulsanti di link nei popover di notifica.

Predefinito: #445799

text-inverse

Il colore del testo sullo sfondo invertito della barra degli strumenti.

Predefinito: #fff

text-toolbar-header

Il colore del testo dell'intestazione della barra degli strumenti.

Predefinito: #fff

text-contrast-background

Il colore del testo per lo sfondo a contrasto (caricatore, titoli delle celle nelle visualizzazioni predefinite dei fogli).

Predefinito: #fff

text-alt-key-hint

Il colore del testo dei suggerimenti di scorciatoia dei pulsanti quando viene premuto il tasto Alt.

Predefinito: rgba(0, 0, 0, 0.8)

Colori delle icone

icon-normal

Il colore dell'icona.

Predefinito: #444

icon-normal-pressed

Il colore dell'icona degli elementi attivi (scheda selezionata, pulsante premuto, ecc.).

Predefinito: #444

icon-inverse

Il colore invertito dell'icona (attualmente non utilizzato nell'interfaccia).

Predefinito: #fff

icon-toolbar-header

Il colore dell'icona dalla barra degli strumenti (ad esempio, un'icona con le iniziali dell'utente).

Predefinito: #fff

icon-notification-badge

Il colore dell'icona dei badge di notifica dalla barra degli strumenti o dal pannello laterale sinistro.

Predefinito: #000

icon-contrast-popover

Il colore dell'icona per i suggerimenti informativi di contrasto (attualmente non utilizzato nell'interfaccia).

Predefinito: #fff

icon-success

Il colore delle caselle di controllo dei commenti risolti o altre indicazioni di successo.

Predefinito: #090

Colore della tela

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.

Predefinito: #eee

canvas-content-background

Il colore di sfondo della pagina del documento, delle celle o della diapositiva.

Predefinito: #fff

canvas-page-border

Il colore del bordo della pagina del documento.

Predefinito: #ccc

canvas-ruler-background

Il colore di sfondo del righello.

Predefinito: #fff

canvas-ruler-border

Il colore del bordo del righello.

Predefinito: #cbcbcb

canvas-ruler-margins-background

Il colore di sfondo dei margini del righello.

Predefinito: #d9d9d9

canvas-ruler-mark

Il colore dei segni del righello (bersaglio e testo).

Predefinito: #555

canvas-ruler-handle-border

Il colore del bordo della maniglia del righello.

Predefinito: #555

canvas-ruler-handle-border-disabled

Il colore del bordo della maniglia del righello disabilitato.

Predefinito: #aaa

canvas-high-contrast

Il colore degli elementi ad alto contrasto (segni delle schede sul righello, simboli delle celle raggruppate).

Predefinito: #000

canvas-high-contrast-disabled

Il colore degli elementi ad alto contrasto disabilitati (segni delle schede sul righello, simboli delle celle raggruppate).

Predefinito: #666

canvas-cell-border

Il colore del bordo della cella.

Predefinito: rgba(0, 0, 0, 0.1)

canvas-cell-title-text

Il colore del testo del titolo della cella.

Predefinito: #444

canvas-cell-title-background

Il colore di sfondo del titolo della cella.

Predefinito: #f7f7f7

canvas-cell-title-background-hover

Il colore di sfondo del titolo della cella al passaggio del mouse.

Predefinito: #dfdfdf

canvas-cell-title-background-selected

Il colore di sfondo del titolo della cella selezionata.

Predefinito: #cfcfcf

canvas-cell-title-border

Il colore del bordo del titolo della cella.

Predefinito: #d8d8d8

canvas-cell-title-border-hover

Il colore del bordo del titolo della cella al passaggio del mouse.

Predefinito: #c9c9c9

canvas-cell-title-border-selected

Il colore del bordo del titolo della cella selezionata.

Predefinito: #bbb

canvas-scroll-thumb

Il colore del cursore di scorrimento.

Predefinito: #f1f1f1

canvas-scroll-thumb-hover

Il colore del cursore di scorrimento al passaggio del mouse.

Predefinito: #cfcfcf

canvas-scroll-thumb-pressed

Il colore del cursore di scorrimento premuto.

Predefinito: #adadad

canvas-scroll-thumb-border

Il colore del bordo del cursore di scorrimento.

Predefinito: #cfcfcf

canvas-scroll-thumb-border-hover

Il colore del bordo del cursore di scorrimento al passaggio del mouse.

Predefinito: #cfcfcf

canvas-scroll-thumb-border-pressed

Il colore del bordo del cursore di scorrimento premuto.

Predefinito: #adadad

canvas-scroll-arrow

Il colore della freccia di scorrimento.

Predefinito: #adadad

canvas-scroll-arrow-hover

Il colore della freccia di scorrimento al passaggio del mouse.

Predefinito: #f1f1f1

canvas-scroll-arrow-pressed

Il colore della freccia di scorrimento premuta.

Predefinito: #f1f1f1

canvas-scroll-thumb-target

Il colore di destinazione del cursore di scorrimento.

Predefinito: #cfcfcf

canvas-scroll-thumb-target-hover

Il colore di destinazione del cursore di scorrimento al passaggio del mouse.

Predefinito: #f1f1f1

canvas-scroll-thumb-target-pressed

Il colore di destinazione del cursore di scorrimento premuto.

Predefinito: #f1f1f1

canvas-sheet-view-cell-background

Il colore di sfondo della cella in modalità Visualizzazione Foglio.

Predefinito: #73bf91

canvas-sheet-view-cell-background-hover

Il colore di sfondo della cella in modalità Visualizzazione Foglio al passaggio del mouse.

Predefinito: #97e3b6

canvas-sheet-view-cell-background-pressed

Il colore di sfondo della cella premuta in modalità Visualizzazione Foglio.

Predefinito: #aaffcc

canvas-sheet-view-cell-title-label

Il colore del testo della cella in modalità Visualizzazione Foglio.

Predefinito: #121212

canvas-sheet-view-select-all-icon

Il colore dell'icona Seleziona tutte le celle in modalità Visualizzazione Foglio.

Predefinito: #3d664e

canvas-freeze-line-1px

Il colore della linea di congelamento con ombra.

Predefinito: #818181

canvas-freeze-line-2px

Il colore della linea di congelamento senza ombra.

Predefinito: #aaaaaa

canvas-select-all-icon

Il colore dell'icona Seleziona tutte le celle.

Predefinito: #82878f