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.

note

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

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

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

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

   note

   In some cases, you might also need to restart services and clear the cache.

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

toolbar-header-document

The toolbar header color for text documents.

Default: #446995

toolbar-header-spreadsheet

The toolbar header color for spreadsheets.

Default: #40865c

toolbar-header-presentation

The toolbar header color for presentations.

Default: #BE664F

toolbar-header-pdf

The toolbar header color for pdfs.

Default: #AA5252

text-toolbar-header-on-background-document

The text color of the user initials from the text documents toolbar header.

Default: #38567A

text-toolbar-header-on-background-spreadsheet

The text color of the user initials from the spreadsheets toolbar header.

Default: #336B49

text-toolbar-header-on-background-presentation

The text color of the user initials from the presentations toolbar header.

Default: #854535

text-toolbar-header-on-background-pdf

The text color of the user initials from the pdfs toolbar header.

Default: #8D4444

Background colors

background-normal

The background color of windows, drop-down panels, regular controls.

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

Default: #f7f7f7

background-toolbar-additional

The additional toolbar background color. It is used for inactive sheets in spreadsheets.

Default: #efefef

background-primary-dialog-button

The background color of the primary dialog button.

Default: #444

background-accent-button

The background color of the accent button in the text document editor.

Default: #446995

background-tab-underline

The background color of the tab underline for the gray toolbar.

Default: #444

background-notification-popover

The background color of the notification popover (for example, about the review mode, filling forms, etc.).

Default: #fcfed7

background-notification-badge

The background color of the icon notification badges from the toolbar header or the left-side panel.

Default: #ffd112

background-scrim

The scrim color reducing the background intensity of the modal windows.

Default: rgba(0, 0, 0, 0.2)

background-loader

The loader background color.

Default: rgba(24, 24, 24, 0.9)

background-alt-key-hint

The background color of the button shortcut hints when the Alt key is pressed.

Default: #FFD938

background-contrast-popover

The background color of the information tips.

Default: #fff

background-fill-button

The background color of the button from the form header.

Default: #FFD112

shadow-contrast-popover

The background color of the information tip shadow.

Default: rgba(0, 0, 0, 0.3)

Highlight colors

highlight-button-hover

The highlight color of buttons, drop-down menu items, and other interactive lists when hovering.

Default: #e0e0e0

highlight-button-pressed

The pressed button highlight color.

Default: #cbcbcb

highlight-button-pressed-hover

The pressed button highlight color on hover.

Default: #bababa

highlight-primary-dialog-button-hover

The highlight color of the primary dialog button on hover.

Default: #1c1c1c

highlight-accent-button-hover

The highlight color of the accent button on hover.

Default: #375478

highlight-accent-button-pressed

The highlight color of the pressed accent button.

Default: #293f59

highlight-header-button-hover

The highlight color of the header button on hover.

Default: rgba(255, 255, 255, 0.15)

highlight-header-button-pressed

The highlight color of the pressed header button.

Default: rgba(255, 255, 255, 0.25)

highlight-toolbar-tab-underline

The highlight color of the active tab underline for the gray toolbar.

Default: #444

highlight-text-select

The highlight color of the selected text in the regular controls.

Default: #3494fb

highlight-fill-button-hover

The highlight color of the form header button on hover.

Default: #FFE165

highlight-fill-button-pressed

The background color of the pressed button from the form header.

Default: #DFB500

Border colors

border-toolbar

The border color of the toolbar, panels, and modal windows.

Default: #cbcbcb

border-toolbar-active-panel-top

The border color of the top toolbar active panel.

Default: #f7f7f7

border-divider

The color of the borders that divide the toolbar and panel elements.

Default: #dfdfdf

border-regular-control

The border color of the regular controls.

Default: #c0c0c0

border-toolbar-button-hover

The general border color for toolbar buttons placed together on hover.

Default: #e0e0e0

border-preview-hover

The border color of the element from the preview control on hover (slide preview, toolbar styles).

Default: #bababa

border-preview-select

The border color of the pressed element from the preview control (slide preview, toolbar styles).

Default: #888

border-control-focus

The border color of the focused regular control.

Default: #848484

border-color-shading

The border color of the palette colors.

Default: rgba(0, 0, 0, 0.15)

border-error

The border color of the input boxes when entering an invalid value.

Default: #f62211

border-contrast-popover

The border color of the information tip.

Default: #fff

border-button-pressed-focus

The border color of the focused pressed button.

Default: #848484

Text colors

text-normal

The text color by default.

Default: rgba(0, 0, 0, 0.8)

text-normal-pressed

The text color of the active element (of the selected tab, pressed button, etc.).

Default: rgba(0, 0, 0, 0.8)

text-secondary

The secondary text color (notes, explanations, etc.).

Default: rgba(0, 0, 0, 0.6)

text-tertiary

The tertiary text color (placeholders).

Default: rgba(0, 0, 0, 0.4)

text-link

The text color of links and link buttons in the notification popovers.

Default: #445799

text-link-hover

The text color of links and link buttons in the notification popovers on hover.

Default: #445799

text-link-active

The text color of pressed links and link buttons in the notification popovers.

Default: #445799

text-link-visited

The text color of visited links and link buttons in the notification popovers.

Default: #445799

text-inverse

The text color on the inverted toolbar background.

Default: #fff

text-toolbar-header

The text color of the toolbar header.

Default: #fff

text-contrast-background

The text color for the contrast background (loader, cell titles in sheet view presets).

Default: #fff

text-alt-key-hint

The text color of the button shortcut hints when the Alt key is pressed.

Default: rgba(0, 0, 0, 0.8)

Icon colors

icon-normal

The icon color.

Default: #444

icon-normal-pressed

The icon color of the active elements (selected tab, pressed button, etc.).

Default: #444

icon-inverse

The inverted icon color (currently, it is not used in the interface).

Default: #fff

icon-toolbar-header

The icon color from the toolbar header (for example, an icon with the user initials).

Default: #fff

icon-notification-badge

The icon color of the notification badges from the toolbar header or the left-side panel.

Default: #000

icon-contrast-popover

The icon color for the contrast information tips (currently, it is not used in the interface).

Default: #fff

icon-success

The color of resolved comment checkboxes or other success indications.

Default: #090

Canvas color

canvas-background

The workspace background color behind the document page, sheet or slide, column heading background, and column grouping interface background in spreadsheets.

Default: #eee

canvas-content-background

The background color of the document page, cells or slide.

Default: #fff

canvas-page-border

The border color of the document page.

Default: #ccc

canvas-ruler-background

The ruler background color.

Default: #fff

canvas-ruler-border

The ruler border color.

Default: #cbcbcb

canvas-ruler-margins-background

The background color of the ruler margins.

Default: #d9d9d9

canvas-ruler-mark

The color of the ruler marks (target and text).

Default: #555

canvas-ruler-handle-border

The border color of the ruler handle.

Default: #555

canvas-ruler-handle-border-disabled

The border color of the disabled ruler handle.

Default: #aaa

canvas-high-contrast

The color of high-contrast elements (tab marks on the ruler, grouped cell symbols).

Default: #000

canvas-high-contrast-disabled

The color of disabled high-contrast elements (tab marks on the ruler, grouped cell symbols).

Default: #666

canvas-cell-border

The cell border color.

Default: rgba(0, 0, 0, 0.1)

canvas-cell-title-text

The text color of the cell title.

Default: #444

canvas-cell-title-background

The background color of the cell title.

Default: #f7f7f7

canvas-cell-title-background-hover

The background color of the cell title on hover.

Default: #dfdfdf

canvas-cell-title-background-selected

The background color of the selected cell title.

Default: #cfcfcf

canvas-cell-title-border

The border color of the cell title.

Default: #d8d8d8

canvas-cell-title-border-hover

The border color of the cell title on hover.

Default: #c9c9c9

canvas-cell-title-border-selected

The border color of the selected cell title.

Default: #bbb

canvas-scroll-thumb

The scroll thumb color.

Default: #f1f1f1

canvas-scroll-thumb-hover

The scroll thumb color on hover.

Default: #cfcfcf

canvas-scroll-thumb-pressed

The pressed scroll thumb color.

Default: #adadad

canvas-scroll-thumb-border

The border color of the scroll thumb.

Default: #cfcfcf

canvas-scroll-thumb-border-hover

The border color of the scroll thumb on hover.

Default: #cfcfcf

canvas-scroll-thumb-border-pressed

The border color of the pressed scroll thumb.

Default: #adadad

canvas-scroll-arrow

The scroll arrow color.

Default: #adadad

canvas-scroll-arrow-hover

The scroll arrow color on hover.

Default: #f1f1f1

canvas-scroll-arrow-pressed

The pressed scroll arrow color.

Default: #f1f1f1

canvas-scroll-thumb-target

The target color of the scroll thumb.

Default: #cfcfcf

canvas-scroll-thumb-target-hover

The target color of the scroll thumb on hover.

Default: #f1f1f1

canvas-scroll-thumb-target-pressed

The target color of the pressed scroll thumb.

Default: #f1f1f1

canvas-sheet-view-cell-background

The cell background color in the Sheet View mode.

Default: #73bf91

canvas-sheet-view-cell-background-hover

The cell background color in the Sheet View mode on hover.

Default: #97e3b6

canvas-sheet-view-cell-background-pressed

The pressed cell background color in the Sheet View mode.

Default: #aaffcc

canvas-sheet-view-cell-title-label

The cell text color in the Sheet View mode.

Default: #121212

canvas-sheet-view-select-all-icon

The Select all cells icon color in the Sheet View mode.

Default: #3d664e

canvas-freeze-line-1px

The freeze line color with shadow.

Default: #818181

canvas-freeze-line-2px

The freeze line color without shadow.

Default: #aaaaaa

canvas-select-all-icon

The Select all cells icon color.

Default: #82878f