Ändern des Themas der Benutzeroberfläche in ONLYOFFICE Docs

Einleitung

Abgesehen von den verfügbaren hellen, klassischen hellen und dunklen Themen der Benutzeroberfläche können ONLYOFFICE Editoren jetzt mit Ihrem eigenen Farbthema angepasst werden. Bitte befolgen Sie die Schritte in dieser Anleitung, um zu erfahren, wie es geht.

hinweis

Die Möglichkeit, benutzerdefinierte Oberflächendesigns hinzuzufügen, ist ab ONLYOFFICE Docs v7.0 verfügbar.

1. Erstellen Sie die Datei .json, die wie folgt aussieht:

   {
       "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)"
           ...
       }
   }

   wobei Sie die folgenden Parameter angeben müssen:

   • name: Definiert den Themennamen, der in der Themenauswahl der erweiterten Einstellungen angezeigt wird.
   • l10n: Definiert den lokalisierten Designnamen. Die Objektschlüssel sind die aus zwei Buchstaben bestehenden Sprachcodes (ru, de, it usw.) und die Werte sind die Übersetzung des Theme-Namens für jede Sprache.
   • id: Definiert den eindeutigen Bezeichner des Themas, der mit dem Präfix theme- beginnen muss. Es kann die Zeichen a-Z, 1-9, -, _ enthalten.
   • type: Definiert den Thementyp, der dunkel oder hell sein kann.
   • colors: Definiert den Satz von Designfarben. Farben können im Hex- oder RGBA-Format dargestellt werden. Einzelheiten zu den Farbvariablen, die dieses Objekt enthalten kann, finden Sie im Abschnitt Farben.

2. Legen Sie die erstellte Datei in das folgende Verzeichnis:

   • Windows: %ProgramFiles%\ONLYOFFICE\DocumentServer\web-apps\apps\common\main\resources\themes
   • Linux: /var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes
   • Docker: Kopieren Sie die Datei in den Docs-Container: sudo docker cp /home/username/folder_name/file_name {container_id}:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes

3. Der Cache auf dem Server für diese Anfrage hat eine Lebensdauer von 5 Minuten, sodass das Thema 5 Minuten später verfügbar ist. Sie müssen die Editorseite aktualisieren.

   hinweis

   In einigen Fällen müssen Sie möglicherweise auch Dienste neu starten und den Cache leeren.

4. Jetzt wird das Design in der Liste Thema der Benutzeroberfläche der Erweiterten Einstellungen angezeigt und Sie können es auf die Editoroberfläche anwenden.

Farben

Farben der Kopfzeilen-Symbolleiste

toolbar-header-document

Die Farbe der Symbolleistenkopfzeile für Textdokumente.

Standard: #446995

toolbar-header-spreadsheet

Die Farbe der Symbolleistenkopfzeile für Tabellenkalkulationen.

Standard: #40865c

toolbar-header-presentation

Die Farbe der Symbolleistenüberschrift für Präsentationen.

Standard: #BE664F

toolbar-header-pdf

Die Farbe der Symbolleistenkopfzeile für PDF-Dateien.

Standard: #AA5252

text-toolbar-header-on-background-document

Die Textfarbe der Benutzerinitialen aus der Kopfzeile der Symbolleiste für Textdokumente.

Standard: #38567A

text-toolbar-header-on-background-spreadsheet

Die Textfarbe der Benutzerinitialen aus der Kopfzeile der Kalkulationstabellen-Symbolleiste.

Standard: #336B49

text-toolbar-header-on-background-presentation

Die Textfarbe der Benutzerinitialen aus der Kopfzeile der Präsentationssymbolleiste.

Standard: #854535

text-toolbar-header-on-background-pdf

Die Textfarbe der Benutzerinitialen aus der Kopfzeile der Symbolleiste für PDF-Dateien.

Standard: #8D4444

Hintergrundfarben

background-normal

Die Hintergrundfarbe von Fenstern, Dropdown-Bedienfeldern, regulären Steuerelementen.

Standard: #fff

background-toolbar

Die Hintergrundfarbe der Symbolleiste, aller Bedienfelder, Kopfzeilen von Dialogfeldern, Bedienfeldern mit Schaltflächen im Zeichenbereich (Kopfzeilen von Inhaltssteuerelementen, Schaltflächen zum Einfügen oder Autokorrekturoptionen).

Standard: #f7f7f7

background-toolbar-additional

Die zusätzliche Hintergrundfarbe der Symbolleiste. Sie wird für inaktive Blätter in Kalkulationstabellen verwendet.

Standard: #efefef

background-primary-dialog-button

Die Hintergrundfarbe der primären Dialogschaltfläche.

Standard: #444

background-accent-button

Die Hintergrundfarbe der Akzentschaltfläche im Textdokumenteneditor.

Standard: #446995

background-tab-underline

Die Hintergrundfarbe der Registerkartenunterstreichung für die graue Symbolleiste.

Standard: #444

background-notification-popover

Die Hintergrundfarbe des Benachrichtigungs-Popovers (z. B. über den Review-Modus, das Ausfüllen von Formularen usw.).

Standard: #fcfed7

background-notification-badge

Die Hintergrundfarbe der Symbolbenachrichtigungsabzeichen in der Kopfzeile der Symbolleiste oder im linken Bereich.

Standard: #ffd112

background-scrim

Die Scrim-Farbe reduziert die Hintergrundintensität der modalen Fenster.

Standard: rgba(0, 0, 0, 0.2)

background-loader

Die Hintergrundfarbe des Loaders.

Standard: rgba(24, 24, 24, 0.9)

background-alt-key-hint

Die Hintergrundfarbe der Tastenkombination weist darauf hin, wenn die Alt-Taste gedrückt wird.

Standard: #FFD938

background-contrast-popover

Die Hintergrundfarbe der Informationstipps.

Standard: #fff

background-fill-button

Die Hintergrundfarbe der Schaltfläche in der Formularkopfzeile.

Standard: #FFD112

shadow-contrast-popover

Die Hintergrundfarbe des Informationstipp-Schattens.

Standard: rgba(0, 0, 0, 0.3)

Farben für die Hervorhebung

highlight-button-hover

Die Hervorhebungsfarbe von Schaltflächen, Drop-Down-Menüelementen und anderen interaktiven Listen beim Hover.

Standard: #e0e0e0

highlight-button-pressed

Die Hervorhebungsfarbe der gedrückten Schaltfläche.

Standard: #cbcbcb

highlight-button-pressed-hover

Die Hervorhebungsfarbe der gedrückten Schaltfläche beim Hover.

Standard: #bababa

highlight-primary-dialog-button-hover

Die Hervorhebungsfarbe der primären Dialogschaltfläche beim Hover.

Standard: #1c1c1c

highlight-accent-button-hover

Die Hervorhebungsfarbe der Akzentschaltfläche beim Hover.

Standard: #375478

highlight-accent-button-pressed

Die Hervorhebungsfarbe der gedrückten Akzentschaltfläche.

Standard: #293f59

highlight-header-button-hover

Die Hervorhebungsfarbe der Kopfzeilenschaltfläche beim Hover.

Standard: rgba(255, 255, 255, 0.15)

highlight-header-button-pressed

Die Hervorhebungsfarbe der gedrückten Kopfzeilenschaltfläche.

Standard: rgba(255, 255, 255, 0.25)

highlight-toolbar-tab-underline

Die Hervorhebungsfarbe der Unterstreichung der aktiven Registerkarte für die graue Symbolleiste.

Standard: #444

highlight-text-select

Die Hervorhebungsfarbe des ausgewählten Textes in den regulären Steuerelementen.

Standard: #3494fb

highlight-fill-button-hover

Die Hervorhebungsfarbe der Schaltfläche in der Formularkopfzeile beim Hover.

Standard: #FFE165

highlight-fill-button-pressed

Die Hintergrundfarbe der gedrückten Schaltfläche in der Formularkopfzeile.

Standard: #DFB500

Rahmenfarben

border-toolbar

Die Rahmenfarbe der Symbolleiste, Bedienfelder und modalen Fenster.

Standard: #cbcbcb

border-toolbar-active-panel-top

Die Rahmenfarbe des aktiven Bedienfelds der oberen Symbolleiste.

Standard: #f7f7f7

border-divider

Die Farbe der Rahmen, die die Symbolleisten- und Bedienfeldelemente voneinander trennen.

Standard: #dfdfdf

border-regular-control

Die Rahmenfarbe der regulären Steuerelemente.

Standard: #c0c0c0

border-toolbar-button-hover

Die allgemeine Rahmenfarbe für Symbolleistenschaltflächen, die beim Hover zusammen platziert werden.

Standard: #e0e0e0

border-preview-hover

Die Rahmenfarbe des Elements aus dem Vorschausteuerelement beim Hover (Folienvorschau, Symbolleistenstile).

Standard: #bababa

border-preview-select

Die Rahmenfarbe des gedrückten Elements aus der Vorschausteuerung (Folienvorschau, Symbolleistenstile).

Standard: #888

border-control-focus

Die Rahmenfarbe des fokussierten regulären Steuerelements.

Standard: #848484

border-color-shading

Die Rahmenfarbe der Palettenfarben.

Standard: rgba(0, 0, 0, 0.15)

border-error

Die Rahmenfarbe der Eingabefelder bei Eingabe eines ungültigen Werts.

Standard: #f62211

border-contrast-popover

Die Rahmenfarbe des Informationstipps.

Standard: #fff

border-button-pressed-focus

Die Rahmenfarbe der fokussierten gedrückten Schaltfläche.

Standard: #848484

Textfarben

text-normal

Die standardmäßige Textfarbe.

Standard: rgba(0, 0, 0, 0.8)

text-normal-pressed

Die Textfarbe des aktiven Elements (der ausgewählten Registerkarte, gedrückten Schaltfläche usw.).

Standard: rgba(0, 0, 0, 0.8)

text-secondary

Die sekundäre Textfarbe (Hinweise, Erklärungen usw.).

Standard: rgba(0, 0, 0, 0.6)

text-tertiary

Die tertiäre Textfarbe (Platzhalter).

Standard: rgba(0, 0, 0, 0.4)

text-link

Die Textfarbe von Links und Linkschaltflächen in den Benachrichtigungs-Popovern.

Standard: #445799

text-link-hover

Die Textfarbe von Links und Linkschaltflächen in den Benachrichtigungs-Popovern beim Hover.

Standard: #445799

text-link-active

Die Textfarbe gedrückter Links und Linkschaltflächen in den Benachrichtigungs-Popovern.

Standard: #445799

text-link-visited

Die Textfarbe besuchter Links und Linkschaltflächen in den Benachrichtigungs-Popovern.

Standard: #445799

text-inverse

Die Textfarbe auf dem invertierten Symbolleistenhintergrund.

Standard: #fff

text-toolbar-header

Die Textfarbe der Kopfzeile der Symbolleiste.

Standard: #fff

text-contrast-background

Die Textfarbe für den Kontrasthintergrund (Loader, Zellentitel in Voreinstellungen für die Arbeitsblattansicht).

Standard: #fff

text-alt-key-hint

Die Textfarbe der Tastenkombination weist darauf hin, wenn die Alt-Taste gedrückt wird.

Standard: rgba(0, 0, 0, 0.8)

Symbolfarben

icon-normal

Die Symbolfarbe.

Standard: #444

icon-normal-pressed

Die Symbolfarbe der aktiven Elemente (ausgewählte Registerkarte, gedrückte Schaltfläche usw.).

Standard: #444

icon-inverse

Die umgekehrte Symbolfarbe (wird derzeit nicht in der Benutzeroberfläche verwendet).

Standard: #fff

icon-toolbar-header

Die Symbolfarbe aus der Kopfzeile der Symbolleiste (z. B. ein Symbol mit den Benutzerinitialen).

Standard: #fff

icon-notification-badge

Die Symbolfarbe der Benachrichtigungs-Badges aus der Kopfzeile der Symbolleiste oder dem linken Bereich.

Standard: #000

icon-contrast-popover

Die Symbolfarbe für die Kontrastinformationen (wird derzeit nicht in der Benutzeroberfläche verwendet).

Standard: #fff

icon-success

Die Farbe von Kontrollkästchen für aufgelöste Kommentare oder andere Erfolgsanzeigen.

Standard: #090

Leinwandfarbe

canvas-background

Die Hintergrundfarbe des Arbeitsbereichs hinter der Dokumentseite, dem Blatt oder der Folie, dem Hintergrund der Spaltenüberschrift und dem Hintergrund der Spaltengruppierungsschnittstelle in Kalkulationstabellen.

Standard: #eee

canvas-content-background

Die Hintergrundfarbe der Dokumentseite, Zellen oder Folie.

Standard: #fff

canvas-page-border

Die Rahmenfarbe der Dokumentseite.

Standard: #ccc

canvas-ruler-background

Die Hintergrundfarbe des Lineals.

Standard: #fff

canvas-ruler-border

Die Rahmenfarbe des Lineals.

Standard: #cbcbcb

canvas-ruler-margins-background

Die Hintergrundfarbe der Linealränder.

Standard: #d9d9d9

canvas-ruler-mark

Die Farbe der Linealmarkierungen (Ziel und Text).

Standard: #555

canvas-ruler-handle-border

Die Rahmenfarbe des Linealgriffs.

Standard: #555

canvas-ruler-handle-border-disabled

Die Rahmenfarbe des deaktivierten Linealgriffs.

Standard: #aaa

canvas-high-contrast

Die Farbe kontrastreicher Elemente (Tabulatorzeichen auf dem Lineal, gruppierte Zellensymbole).

Standard: #000

canvas-high-contrast-disabled

Die Farbe deaktivierter kontrastreicher Elemente (Tabulatorzeichen auf dem Lineal, gruppierte Zellensymbole).

Standard: #666

canvas-cell-border

Die Farbe der Zellenumrandung.

Standard: rgba(0, 0, 0, 0.1)

canvas-cell-title-text

Die Textfarbe des Zellentitels.

Standard: #444

canvas-cell-title-background

Die Hintergrundfarbe des Zellentitels.

Standard: #f7f7f7

canvas-cell-title-background-hover

Die Hintergrundfarbe des Zellentitels beim Hover.

Standard: #dfdfdf

canvas-cell-title-background-selected

Die Hintergrundfarbe des ausgewählten Zellentitels.

Standard: #cfcfcf

canvas-cell-title-border

Die Rahmenfarbe des Zellentitels.

Standard: #d8d8d8

canvas-cell-title-border-hover

Die Rahmenfarbe des Zellentitels beim Hover.

Standard: #c9c9c9

canvas-cell-title-border-selected

Die Rahmenfarbe des ausgewählten Zellentitels.

Standard: #bbb

canvas-scroll-thumb

Die Farbe des Scroll-Daumens.

Standard: #f1f1f1

canvas-scroll-thumb-hover

Die Bildlauf-Daumenfarbe beim Hover.

Standard: #cfcfcf

canvas-scroll-thumb-pressed

Die Farbe des gedrückten Scroll-Daumens.

Standard: #adadad

canvas-scroll-thumb-border

Die Rahmenfarbe des Scroll-Daumens.

Standard: #cfcfcf

canvas-scroll-thumb-border-hover

Die Rahmenfarbe des Bildlaufdaumens beim Hover.

Standard: #cfcfcf

canvas-scroll-thumb-border-pressed

Die Rahmenfarbe des gedrückten Bildlaufdaumens.

Standard: #adadad

canvas-scroll-arrow

Die Farbe des Bildlaufpfeils.

Standard: #adadad

canvas-scroll-arrow-hover

Die Farbe des Bildlaufpfeils beim Hover.

Standard: #f1f1f1

canvas-scroll-arrow-pressed

Die Farbe des gedrückten Bildlaufpfeils.

Standard: #f1f1f1

canvas-scroll-thumb-target

Die Zielfarbe des Scroll-Daumens.

Standard: #cfcfcf

canvas-scroll-thumb-target-hover

Die Zielfarbe des Bildlaufdaumens beim Hover.

Standard: #f1f1f1

canvas-scroll-thumb-target-pressed

Die Zielfarbe des gedrückten Bildlaufdaumens.

Standard: #f1f1f1

canvas-sheet-view-cell-background

Die Hintergrundfarbe der Zelle in der Blattansicht.

Standard: #73bf91

canvas-sheet-view-cell-background-hover

Die Hintergrundfarbe der Zelle in der Blattansicht beim Hover.

Standard: #97e3b6

canvas-sheet-view-cell-background-pressed

Die Hintergrundfarbe der gedrückten Zelle in der Blattansicht.

Standard: #aaffcc

canvas-sheet-view-cell-title-label

Die Textfarbe der Zelle in der Blattansicht.

Standard: #121212

canvas-sheet-view-select-all-icon

Die Farbe des Symbols Alle Zellen auswählen in der Blattansicht.

Standard: #3d664e

canvas-freeze-line-1px

Die Farbe der Fixierungslinie mit Schatten.

Standard: #818181

canvas-freeze-line-2px

Die Farbe der Fixierungslinie ohne Schatten.

Standard: #aaaaaa

canvas-select-all-icon

Die Farbe des Symbols Alle Zellen auswählen.

Standard: #82878f