Artikel zum Thema:
Schließen
Changelog
Schließen
In der cloud testen
In der cloud testen
Hilfe-Center
ONLYOFFICE Docs

Ändern von des Themas der Benutzeroberfläche in ONLYOFFICE Docs

ONLYOFFICE Docs v8.2 ONLYOFFICE Docs Änderungsprotokoll

Version 8.2.0

Release date: 10/17/2024

Version 8.1.1

Release date: 07/15/2024

Version 8.1.0

Release date: 06/19/2024

Version 8.0.1

Release date: 02/26/2024

Version 8.0.0

Release date: 01/30/2024

Version 7.5.1

Release date: 11/08/2023

Version 7.5.0

Release date: 10/17/2023

Version 7.4.1

Release date: 07/31/2023

Version 7.4.0

Release date: 06/13/2023

Version 7.3.3

Release date: 03/15/2023

Version 7.3.2

Release date: 02/14/2023

Version 7.3.0

Release date: 01/31/2023

Version 7.2.2

Release date: 12/20/2022

Version 7.2.1

Release date: 10/21/2022

Version 7.2.0

Release date: 09/22/2022

Version 7.1.1

Release date: 06/02/2022

Version 7.1.0

Release date: 05/12/2022

Version 7.0.1

Release date: 02/22/2022

Version 7.0.0

Release date: 01/18/2022

Version 6.4.2

Release date: 10/14/2021

Version 6.4.1

Release date: 09/28/2021

Version 6.4.0

Release date: 08/26/2021

Version 6.3.2

Release date: 08/10/2021

Version 6.3.1

Release date: 06/08/2021

Version 6.3.0

Release date: 05/20/2021

Version 6.2.2

Release date: 04/19/2021

Version 6.2.1

Release date: 03/31/2021

Version 6.2.0

Release date: 03/01/2021

Version 6.1.1

Release date: 01/28/2021

Version 6.1.0

Release date: 12/02/2020

Version 6.0.2

Release date: 11/12/2020

Version 6.0.1

Release date: 10/28/2020

Version 6.0.0

Release date: 10/14/2020

Version 5.6.5

Release date: 09/21/2020

Version 5.6.4

Release date: 09/08/2020

Version 5.6.3

Release date: 08/17/2020

Version 5.6.2

Release date: 08/07/2020

Version 5.6.1

Release date: 08/05/2020

Version 5.6.0

Release date: 07/29/2020

Version 5.5.3

Release date: 05/22/2020

Version 5.5.1

Release date: 04/09/2020

Version 5.5.0

Release date: 03/05/2020

Version 5.4.2

Release date: 11/27/2019

Version 5.4.1

Release date: 10/02/2019

Version 5.4.0

Release date: 09/03/2019

Version 5.3.4

Release date: 07/16/2019

Version 5.3.2

Release date: 06/24/2019

Version 5.3.1

Release date: 06/06/2019

Version 5.3.0

Release date: 05/28/2019

Version 5.2.8

Release date: 02/05/2019

Version 5.2.7

Release date: 01/16/2019

Version 5.2.6

Release date: 12/25/2018

Version 5.2.4

Release date: 12/12/2018

Version 5.2.3

Release date: 10/31/2018

Version 5.2.2

Release date: 10/05/2018

Version 5.2.0

Release date: 09/28/2018

Version 5.1.5

Release date: 07/18/2018

Version 5.1.4

Release date: 05/24/2018

Version 5.1.3

Release date: 04/27/2018

Version 5.1.2

Release date: 04/11/2018

Version 5.1.1

Release date: 04/05/2018

Version 5.1.0

Release date: 03/28/2018

Version 5.0.7

Release date: 01/16/2018

Version 5.0.6

Release date: 12/11/2017

Version 5.0.5

Release date: 11/28/2017

Version 5.0.4

Release date: 11/14/2017

Version 5.0.3

Release date: 11/02/2017

Version 5.0.2 SaaS only

Release date: 10/13/2017

Version 5.0.1 SaaS only

Release date: 10/05/2017

Version 5.0.0 SaaS only

Release date: 09/23/2017

Version 4.4.4

Release date: 09/13/2017

Windows-only release

See changelog on GitHub

Version 4.4.3

Release date: 08/14/2017

Version 4.4.2

Release date: 07/24/2017

Version 4.4.1

Release date: 07/05/2017

Version 4.3.6

Release date: 06/14/2017

Version 4.3.5

Release date: 06/05/2017

Version 4.3.4

Release date: 05/16/2017

Version 4.3.3

Release date: 04/28/2017

Version 4.3.2

Release date: 04/17/2017

Version 4.3.1

Release date: 04/06/2017

Version 4.3.0

Release date: 04/03/2017

Version 4.2.11

Release date: 03/13/2017

Version 4.2.10

Release date: 02/20/2017

Version 4.2.9

Release date: 02/14/2017

Version 4.2.8

Release date: 02/06/2017

Version 4.2.7

Release date: 02/01/2017

Version 4.2.5

Release date: 01/16/2017

Version 4.2.4

Release date: 01/09/2017

Version 4.2.3

Release date: 12/23/2016

Version 4.2.2

Release date: 12/21/2016

Version 4.2.1

Release date: 12/06/2016

Version 4.2.0

Release date: 12/01/2016

Version 4.1.8

Release date: 11/03/2016

Version 4.1.7

Release date: 11/01/2016

Version 4.1.6

Release date: 10/26/2016

Version 4.1.5

Release date: 10/13/2016

Version 4.1.4

Release date: 10/07/2016

Version 4.1.3

Release date: 09/28/2016

Version 4.1.2

Release date: 09/22/2016

Version 4.0.3

Release date: 08/04/2016

Version 4.0.2

Release date: 08/03/2016

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.

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 Thema-Präfix 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.

    In einigen Fällen müssen Sie möglicherweise auch Dienste neu starten und den Cache leeren. Weitere Informationen zum Löschen des Server-Cache finden Sie im Abschnitt Problembehandlung für Linux oder Docker.
  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

Parameter Beschreibung Default

Die Kopfzeilenfarbe der Symbolleiste für Textdokumente.

toolbar-header-document

#446995

Die Kopfzeilenfarbe der Symbolleiste für Kalkulationstabellen.

toolbar-header-spreadsheet

#40865c

Die Kopfzeilenfarbe der Symbolleiste für Präsentationen.

toolbar-header-presentation

#aa5252

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

text-toolbar-header-on-background-document

#38567A

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

text-toolbar-header-on-background-spreadsheet

#336B49

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

text-toolbar-header-on-background-presentation

#8D4444

Hintergrundfarben

Parameter Beschreibung Default

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

background-normal

#fff

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

background-toolbar

#f7f7f7

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

background-toolbar-additional

#efefef

Die Hintergrundfarbe der primären Dialogschaltfläche.

background-primary-dialog-button

#444

Die Hintergrundfarbe der Akzentschaltfläche im Textdokumenteneditor.

background-accent-button

#446995

Die Hintergrundfarbe der Registerkartenunterstreichung für die graue Symbolleiste.

background-tab-underline

#444

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

background-notification-popover

#fcfed7

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

background-notification-badge

#ffd112

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

background-scrim

rgba(0, 0, 0, 0.2)

Die Hintergrundfarbe des Loaders.

background-loader

rgba(24, 24, 24, 0.9)

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

background-alt-key-hint

#FFD938

Die Hintergrundfarbe der Informationstipps.

background-contrast-popover

#fff

Die Hintergrundfarbe des Informationstipp-Schattens.

shadow-contrast-popover

rgba(0, 0, 0, 0.3)

Farben für die Hervorhebung

Parameter Beschreibung Default

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

highlight-button-hover

#e0e0e0

Die Hervorhebungsfarbe der gedrückten Schaltfläche.

highlight-button-pressed

#cbcbcb

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

highlight-button-pressed-hover

#bababa

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

highlight-primary-dialog-button-hover

#1c1c1c

Die Hervorhebungsfarbe der Akzentschaltfläche beim Hover.

highlight-accent-button-hover

#375478

Die Hervorhebungsfarbe der gedrückten Akzentschaltfläche.

highlight-accent-button-pressed

#293f59

Die Hervorhebungsfarbe der Kopfzeilenschaltfläche beim Hover.

highlight-header-button-hover

rgba(255, 255, 255, 0.15)

Die Hervorhebungsfarbe der gedrückten Kopfzeilenschaltfläche.

highlight-header-button-pressed

rgba(255, 255, 255, 0.25)

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

highlight-toolbar-tab-underline

#444

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

highlight-text-select

#3494fb

Rahmenfarben

Parameter Beschreibung Default

Die Rahmenfarbe der Symbolleiste, Bedienfelder und modalen Fenster.

border-toolbar

#cbcbcb

Die Rahmenfarbe des aktiven Bedienfelds der oberen Symbolleiste.

border-toolbar-active-panel-top

#f7f7f7

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

border-divider

#dfdfdf

Die Rahmenfarbe der regulären Steuerelemente.

border-regular-control

#c0c0c0

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

border-toolbar-button-hover

#e0e0e0

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

border-preview-hover

#bababa

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

border-preview-select

#888

Die Rahmenfarbe des fokussierten regulären Steuerelements.

border-control-focus

#848484

Die Rahmenfarbe der Palettenfarben.

border-color-shading

rgba(0, 0, 0, 0.15)

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

border-error

#f62211

Die Rahmenfarbe des Informationstipps.

border-contrast-popover

#fff

Textfarben

Parameter Beschreibung Default

Die standardmäßige Textfarbe.

text-normal

rgba(0, 0, 0, 0.8)

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

text-normal-pressed

rgba(0, 0, 0, 0.8)

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

text-secondary

rgba(0, 0, 0, 0.6)

Die tertiäre Textfarbe (Platzhalter).

text-tertiary

rgba(0, 0, 0, 0.4)

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

text-link

#445799

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

text-link-hover

#445799

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

text-link-active

#445799

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

text-link-visited

#445799

Die Textfarbe auf dem invertierten Symbolleistenhintergrund.

text-inverse

#fff

Die Textfarbe der Kopfzeile der Symbolleiste.

text-toolbar-header

#fff

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

text-contrast-background

#fff

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

text-alt-key-hint

rgba(0, 0, 0, 0.8)

Symbolfarben

Parameter Beschreibung Default

Die Symbolfarbe.

icon-normal

#444

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

icon-normal-pressed

#444

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

#fff

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

icon-toolbar-header

#fff

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

icon-notification-badge

#000

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

#fff

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

icon-success

#090

Leinwandfarbe

Parameter Beschreibung Default

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

canvas-background

#eee

Die Hintergrundfarbe der Dokumentseite, Zellen oder Folie.

canvas-content-background

#fff

Die Rahmenfarbe der Dokumentseite.

canvas-page-border

#ccc

Die Hintergrundfarbe des Lineals.

canvas-ruler-background

#fff

Die Rahmenfarbe des Lineals.

canvas-ruler-border

#cbcbcb

Die Hintergrundfarbe der Linealränder.

canvas-ruler-margins-background

#d9d9d9

Die Farbe der Linealmarkierungen (Ziel und Text).

canvas-ruler-mark

#555

Die Rahmenfarbe des Linealgriffs.

canvas-ruler-handle-border

#555

Die Rahmenfarbe des deaktivierten Linealgriffs.

canvas-ruler-handle-border-disabled

#aaa

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

canvas-high-contrast

#000

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

canvas-high-contrast-disabled

#666

Die Farbe der Zellenumrandung.

canvas-cell-border

rgba(0, 0, 0, 0.1)

Die Zellentitelfarbe beim Hover.

canvas-cell-title-hover

#dfdfdf

Die Titelfarbe der ausgewählten Zelle.

canvas-cell-title-selected

#cfcfcf

Die Rahmenfarbe des Zellentitels.

canvas-cell-title-border

#d8d8d8

Die Rahmenfarbe des Zellentitels beim Hover.

canvas-cell-title-border-hover

#c9c9c9

Die Rahmenfarbe des ausgewählten Zellentitels.

canvas-cell-title-border-selected

#bbb

Die Zellentitelfarbe in den Voreinstellungen der Arbeitsblattansicht.

canvas-dark-cell-title

#444

Die Zellentitelfarbe in den Voreinstellungen der Arbeitsblattansicht beim Hover.

canvas-dark-cell-title-hover

#666

Die Titelfarbe der ausgewählten Zelle in den Voreinstellungen der Arbeitsblattansicht.

canvas-dark-cell-title-selected

#111

Die Rahmenfarbe des Zellentitels in den Voreinstellungen der Arbeitsblattansicht.

canvas-dark-cell-title-border

#3d3d3d

Die Rahmenfarbe des Zellentitels in den Voreinstellungen der Arbeitsblattansicht beim Hover.

canvas-dark-cell-title-border-hover

#5c5c5c

Die Rahmenfarbe des ausgewählten Zellentitels in den Voreinstellungen der Arbeitsblattansicht.

canvas-dark-cell-title-border-selected

#0f0f0f

Die Hintergrundfarbe der dunklen Dokumentseite, wenn der Dunkelmodus aktiviert ist.

canvas-dark-content-background

#3a3a3a

Die Randfarbe der dunklen Dokumentseite, wenn der Dunkelmodus aktiviert ist.

canvas-dark-page-border

#2a2a2a

Die Farbe des Scroll-Daumens.

canvas-scroll-thumb

#f7f7f7

Die Bildlauf-Daumenfarbe beim Hover.

canvas-scroll-thumb-hover

#c0c0c0

Die Farbe des gedrückten Scroll-Daumens.

canvas-scroll-thumb-pressed

#adadad

Die Rahmenfarbe des Scroll-Daumens.

canvas-scroll-thumb-border

#cbcbcb

Die Rahmenfarbe des Bildlaufdaumens beim Hover.

canvas-scroll-thumb-border-hover

#cbcbcb

Die Rahmenfarbe des gedrückten Bildlaufdaumens.

canvas-scroll-thumb-border-pressed

#adadad

Die Farbe des Bildlaufpfeils.

canvas-scroll-arrow

#adadad

Die Farbe des Bildlaufpfeils beim Hover.

canvas-scroll-arrow-hover

#f7f7f7

Die Farbe des gedrückten Bildlaufpfeils.

canvas-scroll-arrow-pressed

#f7f7f7

Die Zielfarbe des Scroll-Daumens.

canvas-scroll-thumb-target

#c0c0c0

Die Zielfarbe des Bildlaufdaumens beim Hover.

canvas-scroll-thumb-target-hover

#f7f7f7

Die Zielfarbe des gedrückten Bildlaufdaumens.

canvas-scroll-thumb-target-pressed

#f7f7f7
Herunterladen Auf Ihrem eigenen Server hosten Verfügbar für
Docker, Windows und Linux
Wer sich dafür interessiert hat,
hat auch das Folgende gelesen:
Schließen