Changing interface themes in ONLYOFFICE Docs

Introduction

Apart from the available light, classic light, and dark interface themes, ONLYOFFICE editors can now be customized with your own color theme. Please follow the steps of this guide to learn how to do it.

The ability to add custom interface themes is available starting from ONLYOFFICE Docs v7.0.

Create the .json file that will look like this:
```
{
    "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)"
        ...
    }
}
                
```
where you need to specify the following parameters:
- name: Defines the theme name which will be displayed in the theme picker of the advanced settings.
- l10n: Defines the localized theme name. The object keys are the two letter language codes (ru, de, it, etc.) and the values are the theme name translation for each language.
- id: Defines the theme unique identifier, which has to begin with the theme- prefix. It may contain the a-Z, 1-9, -, _ signs.
- type: Defines the theme type, which can be dark or light.
- colors: Defines the set of theme colors. Colors can be presented in the hex or RGBA formats. See colors for details on the color variables that this object can contain.
Put the created file into the following 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: Copy the file into the Docs container: sudo docker cp /home/username/folder_name/file_name {container_id}:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes
The cache on the server for this request has a lifetime of 5 minutes, so the theme will be available 5 minutes later. You will need to refresh the editor page.
In some cases, you might also need to restart services and clear the cache. For more details on how to clear the server cache, you can refer to the Troubleshooting section for Linux, or Docker.
Now the theme will be displayed in the Interface theme list of the Advanced settings and you can apply it to the editor interface.

Colors

Header toolbar colors

Parameter	Description	Default
`toolbar-header-document`	The toolbar header color for text documents.	`#446995`
`toolbar-header-spreadsheet`	The toolbar header color for spreadsheets.	`#40865c`
`toolbar-header-presentation`	The toolbar header color for presentations.	`#BE664F`
`toolbar-header-pdf`	The toolbar header color for pdfs.	`#AA5252`
`text-toolbar-header-on-background-document`	The text color of the user initials from the text documents toolbar header.	`#38567A`
`text-toolbar-header-on-background-spreadsheet`	The text color of the user initials from the spreadsheets toolbar header.	`#336B49`
`text-toolbar-header-on-background-presentation`	The text color of the user initials from the presentations toolbar header.	`#854535`
`text-toolbar-header-on-background-pdf`	The text color of the user initials from the pdfs toolbar header.	`#8D4444`

Background colors

Parameter	Description	Default
`background-normal`	The background color of windows, drop-down panels, regular controls.	`#fff`
`background-toolbar`	The background color of toolbar, all panels, dialog box header, panels with button in the canvas (headers of content controls, buttons for insert or autocorrect options).	`#f7f7f7`
`background-toolbar-additional`	The additional toolbar background color. It is used for inactive sheets in spreadsheets.	`#efefef`
`background-primary-dialog-button`	The background color of the primary dialog button.	`#444`
`background-accent-button`	The background color of the accent button in the text document editor.	`#446995`
`background-tab-underline`	The background color of the tab underline for the gray toolbar.	`#444`
`background-notification-popover`	The background color of the notification popover (for example, about the review mode, filling forms, etc.).	`#fcfed7`
`background-notification-badge`	The background color of the icon notification badges from the toolbar header or the left-side panel.	`#ffd112`
`background-scrim`	The scrim color reducing the background intensity of the modal windows.	`rgba(0, 0, 0, 0.2)`
`background-loader`	The loader background color.	`rgba(24, 24, 24, 0.9)`
`background-alt-key-hint`	The background color of the button shortcut hints when the Alt key is pressed.	`#FFD938`
`background-contrast-popover`	The background color of the information tips.	`#fff`
`background-fill-button`	The background color of the button from the form header.	`#FFD112`
`shadow-contrast-popover`	The background color of the information tip shadow.	`rgba(0, 0, 0, 0.3)`

Highlight colors

Parameter	Description	Default
`highlight-button-hover`	The highlight color of buttons, drop-down menu items, and other interactive lists when hovering.	`#e0e0e0`
`highlight-button-pressed`	The pressed button highlight color.	`#cbcbcb`
`highlight-button-pressed-hover`	The pressed button highlight color on hover.	`#bababa`
`highlight-primary-dialog-button-hover`	The highlight color of the primary dialog button on hover.	`#1c1c1c`
`highlight-accent-button-hover`	The highlight color of the accent button on hover.	`#375478`
`highlight-accent-button-pressed`	The highlight color of the pressed accent button.	`#293f59`
`highlight-header-button-hover`	The highlight color of the header button on hover.	`rgba(255, 255, 255, 0.15)`
`highlight-header-button-pressed`	The highlight color of the pressed header button.	`rgba(255, 255, 255, 0.25)`
`highlight-toolbar-tab-underline`	The highlight color of the active tab underline for the gray toolbar.	`#444`
`highlight-text-select`	The highlight color of the selected text in the regular controls.	`#3494fb`
`highlight-fill-button-hover`	The highlight color of the form header button on hover.	`#FFE165`
`highlight-fill-button-pressed`	The background color of the pressed button from the form header.	`#DFB500`

Border colors

Parameter	Description	Default
`border-toolbar`	The border color of the toolbar, panels, and modal windows.	`#cbcbcb`
`border-toolbar-active-panel-top`	The border color of the top toolbar active panel.	`#f7f7f7`
`border-divider`	The color of the borders that divide the toolbar and panel elements.	`#dfdfdf`
`border-regular-control`	The border color of the regular controls.	`#c0c0c0`
`border-toolbar-button-hover`	The general border color for toolbar buttons placed together on hover.	`#e0e0e0`
`border-preview-hover`	The border color of the element from the preview control on hover (slide preview, toolbar styles).	`#bababa`
`border-preview-select`	The border color of the pressed element from the preview control (slide preview, toolbar styles).	`#888`
`border-control-focus`	The border color of the focused regular control.	`#848484`
`border-color-shading`	The border color of the palette colors.	`rgba(0, 0, 0, 0.15)`
`border-error`	The border color of the input boxes when entering an invalid value.	`#f62211`
`border-contrast-popover`	The border color of the information tip.	`#fff`
`border-button-pressed-focus`	The border color of the focused pressed button.	`#848484`

Text colors

Parameter	Description	Default
`text-normal`	The text color by default.	`rgba(0, 0, 0, 0.8)`
`text-normal-pressed`	The text color of the active element (of the selected tab, pressed button, etc.).	`rgba(0, 0, 0, 0.8)`
`text-secondary`	The secondary text color (notes, explanations, etc.).	`rgba(0, 0, 0, 0.6)`
`text-tertiary`	The tertiary text color (placeholders).	`rgba(0, 0, 0, 0.4)`
`text-link`	The text color of links and link buttons in the notification popovers.	`#445799`
`text-link-hover`	The text color of links and link buttons in the notification popovers on hover.	`#445799`
`text-link-active`	The text color of pressed links and link buttons in the notification popovers.	`#445799`
`text-link-visited`	The text color of visited links and link buttons in the notification popovers.	`#445799`
`text-inverse`	The text color on the inverted toolbar background.	`#fff`
`text-toolbar-header`	The text color of the toolbar header.	`#fff`
`text-contrast-background`	The text color for the contrast background (loader, cell titles in sheet view presets).	`#fff`
`text-alt-key-hint`	The text color of the button shortcut hints when the Alt key is pressed.	`rgba(0, 0, 0, 0.8)`

Icon colors

Parameter	Description	Default
`icon-normal`	The icon color.	`#444`
`icon-normal-pressed`	The icon color of the active elements (selected tab, pressed button, etc.).	`#444`
`icon-inverse`	The inverted icon color (currently, it is not used in the interface).	`#fff`
`icon-toolbar-header`	The icon color from the toolbar header (for example, an icon with the user initials).	`#fff`
`icon-notification-badge`	The icon color of the notification badges from the toolbar header or the left-side panel.	`#000`
`icon-contrast-popover`	The icon color for the contrast information tips (currently, it is not used in the interface).	`#fff`
`icon-success`	The color of resolved comment checkboxes or other success indications.	`#090`

Canvas color

Parameter	Description	Default
`canvas-background`	The workspace background color behind the document page, sheet or slide, column heading background, and column grouping interface background in spreadsheets.	`#eee`
`canvas-content-background`	The background color of the document page, cells or slide.	`#fff`
`canvas-page-border`	The border color of the document page.	`#ccc`
`canvas-ruler-background`	The ruler background color.	`#fff`
`canvas-ruler-border`	The ruler border color.	`#cbcbcb`
`canvas-ruler-margins-background`	The background color of the ruler margins.	`#d9d9d9`
`canvas-ruler-mark`	The color of the ruler marks (target and text).	`#555`
`canvas-ruler-handle-border`	The border color of the ruler handle.	`#555`
`canvas-ruler-handle-border-disabled`	The border color of the disabled ruler handle.	`#aaa`
`canvas-high-contrast`	The color of high-contrast elements (tab marks on the ruler, grouped cell symbols).	`#000`
`canvas-high-contrast-disabled`	The color of disabled high-contrast elements (tab marks on the ruler, grouped cell symbols).	`#666`
`canvas-cell-border`	The cell border color.	`rgba(0, 0, 0, 0.1)`
`canvas-cell-title-text`	The text color of the cell title.	`#444`
`canvas-cell-title-background`	The background color of the cell title.	`#f7f7f7`
`canvas-cell-title-background-hover`	The background color of the cell title on hover.	`#dfdfdf`
`canvas-cell-title-background-selected`	The background color of the selected cell title.	`#cfcfcf`
`canvas-cell-title-border`	The border color of the cell title.	`#d8d8d8`
`canvas-cell-title-border-hover`	The border color of the cell title on hover.	`#c9c9c9`
`canvas-cell-title-border-selected`	The border color of the selected cell title.	`#bbb`
`canvas-scroll-thumb`	The scroll thumb color.	`#f1f1f1`
`canvas-scroll-thumb-hover`	The scroll thumb color on hover.	`#cfcfcf`
`canvas-scroll-thumb-pressed`	The pressed scroll thumb color.	`#adadad`
`canvas-scroll-thumb-border`	The border color of the scroll thumb.	`#cfcfcf`
`canvas-scroll-thumb-border-hover`	The border color of the scroll thumb on hover.	`#cfcfcf`
`canvas-scroll-thumb-border-pressed`	The border color of the pressed scroll thumb.	`#adadad`
`canvas-scroll-arrow`	The scroll arrow color.	`#adadad`
`canvas-scroll-arrow-hover`	The scroll arrow color on hover.	`#f1f1f1`
`canvas-scroll-arrow-pressed`	The pressed scroll arrow color.	`#f1f1f1`
`canvas-scroll-thumb-target`	The target color of the scroll thumb.	`#cfcfcf`
`canvas-scroll-thumb-target-hover`	The target color of the scroll thumb on hover.	`#f1f1f1`
`canvas-scroll-thumb-target-pressed`	The target color of the pressed scroll thumb.	`#f1f1f1`
`canvas-sheet-view-cell-background`	The cell background color in the Sheet View mode.	`#73bf91`
`canvas-sheet-view-cell-background-hover`	The cell background color in the Sheet View mode on hover.	`#97e3b6`
`canvas-sheet-view-cell-background-pressed`	The pressed cell background color in the Sheet View mode.	`#aaffcc`
`canvas-sheet-view-cell-title-label`	The cell text color in the Sheet View mode.	`#121212`
`canvas-sheet-view-select-all-icon`	The Select all cells icon color in the Sheet View mode.	`#3d664e`
`canvas-freeze-line-1px`	The freeze line color with shadow.	`#818181`
`canvas-freeze-line-2px`	The freeze line color without shadow.	`#aaaaaa`
`canvas-select-all-icon`	The Select all cells icon color.	`#82878f`

Host ONLYOFFICE Docs on your own server or use it in the cloud

Get it now Use in the cloud