Ändern von 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.
- 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.
-
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
- Windows:
- 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.
- 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 | Standard |
|---|---|---|
toolbar-header-document | Die Farbe der Symbolleistenkopfzeile für Textdokumente.
| #446995 |
toolbar-header-spreadsheet | Die Farbe der Symbolleistenkopfzeile für Tabellenkalkulationen.
| #40865c |
toolbar-header-presentation | Die Farbe der Symbolleistenüberschrift für Präsentationen.
| #aa5252 |
text-toolbar-header-on-background-document | Die Textfarbe der Benutzerinitialen aus der Kopfzeile der Symbolleiste für Textdokumente.
| #38567A |
text-toolbar-header-on-background-spreadsheet | Die Textfarbe der Benutzerinitialen aus der Kopfzeile der Kalkulationstabellen-Symbolleiste.
| #336B49 |
text-toolbar-header-on-background-presentation | Die Textfarbe der Benutzerinitialen aus der Kopfzeile der Präsentationssymbolleiste.
| #8D4444 |
Hintergrundfarben
| Parameter | Beschreibung | Standard |
|---|---|---|
background-normal | Die Hintergrundfarbe von Fenstern, Dropdown-Bedienfeldern, regulären Steuerelementen.
| #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).
| #f7f7f7 |
background-toolbar-additional | Die zusätzliche Hintergrundfarbe der Symbolleiste. Sie wird für inaktive Blätter in Kalkulationstabellen verwendet.
| #efefef |
background-primary-dialog-button | Die Hintergrundfarbe der primären Dialogschaltfläche.
| #444 |
background-accent-button | Die Hintergrundfarbe der Akzentschaltfläche im Textdokumenteneditor.
| #446995 |
background-tab-underline | Die Hintergrundfarbe der Registerkartenunterstreichung für die graue Symbolleiste.
| #444 |
background-notification-popover | Die Hintergrundfarbe des Benachrichtigungs-Popovers (z. B. über den Review-Modus, das Ausfüllen von Formularen usw.).
| #fcfed7 |
background-notification-badge | Die Hintergrundfarbe der Symbolbenachrichtigungsabzeichen in der Kopfzeile der Symbolleiste oder im linken Bereich.
| #ffd112 |
background-scrim | Die Scrim-Farbe reduziert die Hintergrundintensität der modalen Fenster.
| rgba(0, 0, 0, 0.2) |
background-loader | Die Hintergrundfarbe des Loaders.
| rgba(24, 24, 24, 0.9) |
background-alt-key-hint | Die Hintergrundfarbe der Tastenkombination weist darauf hin, wenn die Alt-Taste gedrückt wird.
| #FFD938 |
background-contrast-popover | Die Hintergrundfarbe der Informationstipps.
| #fff |
shadow-contrast-popover | Die Hintergrundfarbe des Informationstipp-Schattens.
| rgba(0, 0, 0, 0.3) |
Farben für die Hervorhebung
| Parameter | Beschreibung | Standard |
|---|---|---|
highlight-button-hover | Die Hervorhebungsfarbe von Schaltflächen, Drop-Down-Menüelementen und anderen interaktiven Listen beim Hover.
| #e0e0e0 |
highlight-button-pressed | Die Hervorhebungsfarbe der gedrückten Schaltfläche.
| #cbcbcb |
highlight-button-pressed-hover | Die Hervorhebungsfarbe der gedrückten Schaltfläche beim Hover.
| #bababa |
highlight-primary-dialog-button-hover | Die Hervorhebungsfarbe der primären Dialogschaltfläche beim Hover.
| #1c1c1c |
highlight-accent-button-hover | Die Hervorhebungsfarbe der Akzentschaltfläche beim Hover.
| #375478 |
highlight-accent-button-pressed | Die Hervorhebungsfarbe der gedrückten Akzentschaltfläche.
| #293f59 |
highlight-header-button-hover | Die Hervorhebungsfarbe der Kopfzeilenschaltfläche beim Hover.
| rgba(255, 255, 255, 0.15) |
highlight-header-button-pressed | Die Hervorhebungsfarbe der gedrückten Kopfzeilenschaltfläche.
| rgba(255, 255, 255, 0.25) |
highlight-toolbar-tab-underline | Die Hervorhebungsfarbe der Unterstreichung der aktiven Registerkarte für die graue Symbolleiste.
| #444 |
highlight-text-select | Die Hervorhebungsfarbe des ausgewählten Textes in den regulären Steuerelementen.
| #3494fb |
Rahmenfarben
| Parameter | Beschreibung | Standard |
|---|---|---|
border-toolbar | Die Rahmenfarbe der Symbolleiste, Bedienfelder und modalen Fenster.
| #cbcbcb |
border-toolbar-active-panel-top | Die Rahmenfarbe des aktiven Bedienfelds der oberen Symbolleiste.
| #f7f7f7 |
border-divider | Die Farbe der Rahmen, die die Symbolleisten- und Bedienfeldelemente voneinander trennen.
| #dfdfdf |
border-regular-control | Die Rahmenfarbe der regulären Steuerelemente.
| #c0c0c0 |
border-toolbar-button-hover | Die allgemeine Rahmenfarbe für Symbolleistenschaltflächen, die beim Hover zusammen platziert werden.
| #e0e0e0 |
border-preview-hover | Die Rahmenfarbe des Elements aus dem Vorschausteuerelement beim Hover (Folienvorschau, Symbolleistenstile).
| #bababa |
border-preview-select | Die Rahmenfarbe des gedrückten Elements aus der Vorschausteuerung (Folienvorschau, Symbolleistenstile).
| #888 |
border-control-focus | Die Rahmenfarbe des fokussierten regulären Steuerelements.
| #848484 |
border-color-shading | Die Rahmenfarbe der Palettenfarben.
| rgba(0, 0, 0, 0.15) |
border-error | Die Rahmenfarbe der Eingabefelder bei Eingabe eines ungültigen Werts.
| #f62211 |
border-contrast-popover | Die Rahmenfarbe des Informationstipps.
| #fff |
Textfarben
| Parameter | Beschreibung | Standard |
|---|---|---|
text-normal | Die standardmäßige Textfarbe.
| rgba(0, 0, 0, 0.8) |
text-normal-pressed | Die Textfarbe des aktiven Elements (der ausgewählten Registerkarte, gedrückten Schaltfläche usw.).
| rgba(0, 0, 0, 0.8) |
text-secondary | Die sekundäre Textfarbe (Hinweise, Erklärungen usw.).
| rgba(0, 0, 0, 0.6) |
text-tertiary | Die tertiäre Textfarbe (Platzhalter).
| rgba(0, 0, 0, 0.4) |
text-link | Die Textfarbe von Links und Linkschaltflächen in den Benachrichtigungs-Popovern.
| #445799 |
text-link-hover | Die Textfarbe von Links und Linkschaltflächen in den Benachrichtigungs-Popovern beim Hover.
| #445799 |
text-link-active | Die Textfarbe gedrückter Links und Linkschaltflächen in den Benachrichtigungs-Popovern.
| #445799 |
text-link-visited | Die Textfarbe besuchter Links und Linkschaltflächen in den Benachrichtigungs-Popovern.
| #445799 |
text-inverse | Die Textfarbe auf dem invertierten Symbolleistenhintergrund.
| #fff |
text-toolbar-header | Die Textfarbe der Kopfzeile der Symbolleiste.
| #fff |
text-contrast-background | Die Textfarbe für den Kontrasthintergrund (Loader, Zellentitel in Voreinstellungen für die Arbeitsblattansicht).
| #fff |
text-alt-key-hint | Die Textfarbe der Tastenkombination weist darauf hin, wenn die Alt-Taste gedrückt wird.
| rgba(0, 0, 0, 0.8) |
Symbolfarben
| Parameter | Beschreibung | Standard |
|---|---|---|
icon-normal | Die Symbolfarbe.
| #444 |
icon-normal-pressed | Die Symbolfarbe der aktiven Elemente (ausgewählte Registerkarte, gedrückte Schaltfläche usw.).
| #444 |
icon-inverse | Die umgekehrte Symbolfarbe (wird derzeit nicht in der Benutzeroberfläche verwendet). | #fff |
icon-toolbar-header | Die Symbolfarbe aus der Kopfzeile der Symbolleiste (z. B. ein Symbol mit den Benutzerinitialen).
| #fff |
icon-notification-badge | Die Symbolfarbe der Benachrichtigungs-Badges aus der Kopfzeile der Symbolleiste oder dem linken Bereich.
| #000 |
icon-contrast-popover | Die Symbolfarbe für die Kontrastinformationen (wird derzeit nicht in der Benutzeroberfläche verwendet). | #fff |
icon-success | Die Farbe von Kontrollkästchen für aufgelöste Kommentare oder andere Erfolgsanzeigen.
| #090 |
Leinwandfarbe
| Parameter | Beschreibung | Standard |
|---|---|---|
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.
| #eee |
canvas-content-background | Die Hintergrundfarbe der Dokumentseite, Zellen oder Folie.
| #fff |
canvas-page-border | Die Rahmenfarbe der Dokumentseite.
| #ccc |
canvas-ruler-background | Die Hintergrundfarbe des Lineals.
| #fff |
canvas-ruler-border | Die Rahmenfarbe des Lineals.
| #cbcbcb |
canvas-ruler-margins-background | Die Hintergrundfarbe der Linealränder.
| #d9d9d9 |
canvas-ruler-mark | Die Farbe der Linealmarkierungen (Ziel und Text).
| #555 |
canvas-ruler-handle-border | Die Rahmenfarbe des Linealgriffs.
| #555 |
canvas-ruler-handle-border-disabled | Die Rahmenfarbe des deaktivierten Linealgriffs.
| #aaa |
canvas-high-contrast | Die Farbe kontrastreicher Elemente (Tabulatorzeichen auf dem Lineal, gruppierte Zellensymbole).
| #000 |
canvas-high-contrast-disabled | Die Farbe deaktivierter kontrastreicher Elemente (Tabulatorzeichen auf dem Lineal, gruppierte Zellensymbole).
| #666 |
canvas-cell-border | Die Farbe der Zellenumrandung.
| rgba(0, 0, 0, 0.1) |
canvas-cell-title-hover | Die Zellentitelfarbe beim Hover.
| #dfdfdf |
canvas-cell-title-selected | Die Titelfarbe der ausgewählten Zelle.
| #cfcfcf |
canvas-cell-title-border | Die Rahmenfarbe des Zellentitels.
| #d8d8d8 |
canvas-cell-title-border-hover | Die Rahmenfarbe des Zellentitels beim Hover.
| #c9c9c9 |
canvas-cell-title-border-selected | Die Rahmenfarbe des ausgewählten Zellentitels.
| #bbb |
canvas-dark-cell-title | Die Zellentitelfarbe in den Voreinstellungen der Arbeitsblattansicht.
| #444 |
canvas-dark-cell-title-hover | Die Zellentitelfarbe in den Voreinstellungen der Arbeitsblattansicht beim Hover.
| #666 |
canvas-dark-cell-title-selected | Die Titelfarbe der ausgewählten Zelle in den Voreinstellungen der Arbeitsblattansicht.
| #111 |
canvas-dark-cell-title-border | Die Rahmenfarbe des Zellentitels in den Voreinstellungen der Arbeitsblattansicht.
| #3d3d3d |
canvas-dark-cell-title-border-hover | Die Rahmenfarbe des Zellentitels in den Voreinstellungen der Arbeitsblattansicht beim Hover.
| #5c5c5c |
canvas-dark-cell-title-border-selected | Die Rahmenfarbe des ausgewählten Zellentitels in den Voreinstellungen der Arbeitsblattansicht.
| #0f0f0f |
canvas-dark-content-background | Die Hintergrundfarbe der dunklen Dokumentseite, wenn der Dunkelmodus aktiviert ist.
| #3a3a3a |
canvas-dark-page-border | Die Randfarbe der dunklen Dokumentseite, wenn der Dunkelmodus aktiviert ist.
| #2a2a2a |
canvas-scroll-thumb | Die Farbe des Scroll-Daumens.
| #f7f7f7 |
canvas-scroll-thumb-hover | Die Bildlauf-Daumenfarbe beim Hover.
| #c0c0c0 |
canvas-scroll-thumb-pressed | Die Farbe des gedrückten Scroll-Daumens.
| #adadad |
canvas-scroll-thumb-border | Die Rahmenfarbe des Scroll-Daumens.
| #cbcbcb |
canvas-scroll-thumb-border-hover | Die Rahmenfarbe des Bildlaufdaumens beim Hover.
| #cbcbcb |
canvas-scroll-thumb-border-pressed | Die Rahmenfarbe des gedrückten Bildlaufdaumens.
| #adadad |
canvas-scroll-arrow | Die Farbe des Bildlaufpfeils.
| #adadad |
canvas-scroll-arrow-hover | Die Farbe des Bildlaufpfeils beim Hover.
| #f7f7f7 |
canvas-scroll-arrow-pressed | Die Farbe des gedrückten Bildlaufpfeils.
| #f7f7f7 |
canvas-scroll-thumb-target | Die Zielfarbe des Scroll-Daumens.
| #c0c0c0 |
canvas-scroll-thumb-target-hover | Die Zielfarbe des Bildlaufdaumens beim Hover.
| #f7f7f7 |
canvas-scroll-thumb-target-pressed | Die Zielfarbe des gedrückten Bildlaufdaumens.
| #f7f7f7 |
