Изменение темы интерфейса в ONLYOFFICE Docs

Введение

Помимо доступных светлой, классической светлой и темной тем интерфейса, редакторы ONLYOFFICE теперь можно настроить с помощью собственной цветовой темы. Чтобы узнать, как это сделать, выполните шаги из этого руководства.

примечание

Возможность добавлять собственные темы интерфейса доступна начиная с версии ONLYOFFICE Docs 7.0.

1. Создайте файл .json, который будет выглядеть следующим образом:

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

   где необходимо указать следующие параметры:

   • name: определяет название темы, которое будет отображаться в списке тем в дополнительных параметрах.
   • l10n: определяет локализованное название темы. Ключи объекта — двухбуквенные коды языков (ru, de, it и т.д.), а значения — перевод названия темы на каждый язык.
   • id: определяет уникальный идентификатор темы, который должен начинаться с префикса theme-. Он может содержать символы a-Z, 1-9, -, _.
   • type: определяет тип темы: dark (темная) или light (светлая).
   • colors: определяет набор цветов темы. Цвета можно указывать в формате HEX или RGBA. Подробнее о цветовых переменных, которые может содержать этот объект, см. в разделе Цвета.

2. Поместите созданный файл в следующую папку:

   • Windows: %ProgramFiles%\ONLYOFFICE\DocumentServer\web-apps\apps\common\main\resources\themes
   • Linux: /var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes
   • Docker: скопируйте файл в контейнер Docs: sudo docker cp /home/username/folder_name/file_name {container_id}:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes

3. Кэш на сервере для этого запроса хранится 5 минут, поэтому тема станет доступна через 5 минут. Нужно будет обновить страницу редактора.

   примечание

   В некоторых случаях также может потребоваться перезапустить службы и очистить кэш.

4. Теперь тема будет отображаться в списке Тема интерфейса в разделе Дополнительные параметры, и ее можно будет применить к интерфейсу редактора.

Цвета

Цвета верхней панели инструментов

toolbar-header-document

Цвет верхней панели инструментов для текстовых документов.

По умолчанию: #446995

toolbar-header-spreadsheet

Цвет верхней панели инструментов для электронных таблиц.

По умолчанию: #40865c

toolbar-header-presentation

Цвет верхней панели инструментов для презентаций.

По умолчанию: #BE664F

toolbar-header-pdf

Цвет верхней панели инструментов для PDF-файлов.

По умолчанию: #AA5252

text-toolbar-header-on-background-document

Цвет текста инициалов пользователя на верхней панели инструментов текстовых документов.

По умолчанию: #38567A

text-toolbar-header-on-background-spreadsheet

Цвет текста инициалов пользователя на верхней панели инструментов электронных таблиц.

По умолчанию: #336B49

text-toolbar-header-on-background-presentation

Цвет текста инициалов пользователя на верхней панели инструментов презентаций.

По умолчанию: #854535

text-toolbar-header-on-background-pdf

Цвет текста инициалов пользователя на верхней панели инструментов PDF-файлов.

По умолчанию: #8D4444

Цвета фона

background-normal

Цвет фона окон, выпадающих панелей, обычных элементов управления.

По умолчанию: #fff

background-toolbar

Цвет фона панели инструментов, всех панелей, заголовка диалогового окна, панелей с кнопками на холсте (заголовков элементов управления содержимым, кнопок параметров вставки или автозамены).

По умолчанию: #f7f7f7

background-toolbar-additional

Дополнительный цвет фона панели инструментов. Используется для неактивных листов в электронных таблицах.

По умолчанию: #efefef

background-primary-dialog-button

Цвет фона основной кнопки диалогового окна.

По умолчанию: #444

background-accent-button

Цвет фона акцентной кнопки в редакторе текстовых документов.

По умолчанию: #446995

background-tab-underline

Цвет фона подчеркивания вкладки для серой панели инструментов.

По умолчанию: #444

background-notification-popover

Цвет фона всплывающего уведомления (например, о режиме рецензирования, заполнении форм и т.д.).

По умолчанию: #fcfed7

background-notification-badge

Цвет фона значков уведомлений на верхней панели инструментов или на левой боковой панели.

По умолчанию: #ffd112

background-scrim

Цвет затемнения, которое снижает яркость фона под модальными окнами.

По умолчанию: rgba(0, 0, 0, 0.2)

background-loader

Цвет фона индикатора загрузки.

По умолчанию: rgba(24, 24, 24, 0.9)

background-alt-key-hint

Цвет фона подсказок с сочетаниями клавиш для кнопок при нажатии клавиши Alt.

По умолчанию: #FFD938

background-contrast-popover

Цвет фона информационных подсказок.

По умолчанию: #fff

background-fill-button

Цвет фона кнопки в заголовке формы.

По умолчанию: #FFD112

shadow-contrast-popover

Цвет фона тени информационной подсказки.

По умолчанию: rgba(0, 0, 0, 0.3)

Цвета выделения

highlight-button-hover

Цвет выделения кнопок, пунктов выпадающего меню и других интерактивных списков при наведении курсора.

По умолчанию: #e0e0e0

highlight-button-pressed

Цвет выделения нажатой кнопки.

По умолчанию: #cbcbcb

highlight-button-pressed-hover

Цвет выделения нажатой кнопки при наведении курсора.

По умолчанию: #bababa

highlight-primary-dialog-button-hover

Цвет выделения основной кнопки диалогового окна при наведении курсора.

По умолчанию: #1c1c1c

highlight-accent-button-hover

Цвет выделения акцентной кнопки при наведении курсора.

По умолчанию: #375478

highlight-accent-button-pressed

Цвет выделения нажатой акцентной кнопки.

По умолчанию: #293f59

highlight-header-button-hover

Цвет выделения кнопки в заголовке при наведении курсора.

По умолчанию: rgba(255, 255, 255, 0.15)

highlight-header-button-pressed

Цвет выделения нажатой кнопки в заголовке.

По умолчанию: rgba(255, 255, 255, 0.25)

highlight-toolbar-tab-underline

Цвет выделения подчеркивания активной вкладки для серой панели инструментов.

По умолчанию: #444

highlight-text-select

Цвет выделения выбранного текста в обычных элементах управления.

По умолчанию: #3494fb

highlight-fill-button-hover

Цвет выделения кнопки в заголовке формы при наведении курсора.

По умолчанию: #FFE165

highlight-fill-button-pressed

Цвет фона нажатой кнопки в заголовке формы.

По умолчанию: #DFB500

Цвета границ

border-toolbar

Цвет границ панели инструментов, панелей и модальных окон.

По умолчанию: #cbcbcb

border-toolbar-active-panel-top

Цвет границ активной панели верхней панели инструментов.

По умолчанию: #f7f7f7

border-divider

Цвет границ, разделяющих элементы панели инструментов и панелей.

По умолчанию: #dfdfdf

border-regular-control

Цвет границ обычных элементов управления.

По умолчанию: #c0c0c0

border-toolbar-button-hover

Общий цвет границ сгруппированных кнопок панели инструментов при наведении курсора.

По умолчанию: #e0e0e0

border-preview-hover

Цвет границ элемента в области предварительного просмотра при наведении курсора (эскизы слайдов, стили на панели инструментов).

По умолчанию: #bababa

border-preview-select

Цвет границ нажатого элемента в области предварительного просмотра (эскизы слайдов, стили на панели инструментов).

По умолчанию: #888

border-control-focus

Цвет границ обычного элемента управления в фокусе.

По умолчанию: #848484

border-color-shading

Цвет границ цветов палитры.

По умолчанию: rgba(0, 0, 0, 0.15)

border-error

Цвет границ полей ввода при вводе недопустимого значения.

По умолчанию: #f62211

border-contrast-popover

Цвет границ информационной подсказки.

По умолчанию: #fff

border-button-pressed-focus

Цвет границ нажатой кнопки в фокусе.

По умолчанию: #848484

Цвета текста

text-normal

Цвет текста по умолчанию.

По умолчанию: rgba(0, 0, 0, 0.8)

text-normal-pressed

Цвет текста активного элемента (выбранной вкладки, нажатой кнопки и т.д.).

По умолчанию: rgba(0, 0, 0, 0.8)

text-secondary

Цвет второстепенного текста (примечаний, пояснений и т.д.).

По умолчанию: rgba(0, 0, 0, 0.6)

text-tertiary

Цвет третичного текста (текста-заполнителя).

По умолчанию: rgba(0, 0, 0, 0.4)

text-link

Цвет текста ссылок и кнопок-ссылок во всплывающих уведомлениях.

По умолчанию: #445799

text-link-hover

Цвет текста ссылок и кнопок-ссылок во всплывающих уведомлениях при наведении курсора.

По умолчанию: #445799

text-link-active

Цвет текста нажатых ссылок и кнопок-ссылок во всплывающих уведомлениях.

По умолчанию: #445799

text-link-visited

Цвет текста посещенных ссылок и кнопок-ссылок во всплывающих уведомлениях.

По умолчанию: #445799

text-inverse

Цвет текста на инвертированном фоне панели инструментов.

По умолчанию: #fff

text-toolbar-header

Цвет текста верхней панели инструментов.

По умолчанию: #fff

text-contrast-background

Цвет текста на контрастном фоне (индикатор загрузки, заголовки ячеек в представлениях листа).

По умолчанию: #fff

text-alt-key-hint

Цвет текста подсказок с сочетаниями клавиш для кнопок при нажатии клавиши Alt.

По умолчанию: rgba(0, 0, 0, 0.8)

Цвета значков

icon-normal

Цвет значков.

По умолчанию: #444

icon-normal-pressed

Цвет значков активных элементов (выбранной вкладки, нажатой кнопки и т.д.).

По умолчанию: #444

icon-inverse

Инвертированный цвет значков (в настоящее время не используется в интерфейсе).

По умолчанию: #fff

icon-toolbar-header

Цвет значков на верхней панели инструментов (например, значка с инициалами пользователя).

По умолчанию: #fff

icon-notification-badge

Цвет значков уведомлений на верхней панели инструментов или на левой боковой панели.

По умолчанию: #000

icon-contrast-popover

Цвет значков для контрастных информационных подсказок (в настоящее время не используется в интерфейсе).

По умолчанию: #fff

icon-success

Цвет флажков решенных комментариев и других индикаторов успешного выполнения.

По умолчанию: #090

Цвета холста

canvas-background

Цвет фона рабочей области за страницей документа, листом или слайдом, цвет фона заголовков столбцов и фона интерфейса группировки столбцов в электронных таблицах.

По умолчанию: #eee

canvas-content-background

Цвет фона страницы документа, ячеек или слайда.

По умолчанию: #fff

canvas-page-border

Цвет границ страницы документа.

По умолчанию: #ccc

canvas-ruler-background

Цвет фона линейки.

По умолчанию: #fff

canvas-ruler-border

Цвет границ линейки.

По умолчанию: #cbcbcb

canvas-ruler-margins-background

Цвет фона полей на линейке.

По умолчанию: #d9d9d9

canvas-ruler-mark

Цвет делений линейки (меток и текста).

По умолчанию: #555

canvas-ruler-handle-border

Цвет границ маркера линейки.

По умолчанию: #555

canvas-ruler-handle-border-disabled

Цвет границ неактивного маркера линейки.

По умолчанию: #aaa

canvas-high-contrast

Цвет высококонтрастных элементов (позиций табуляции на линейке, символов сгруппированных ячеек).

По умолчанию: #000

canvas-high-contrast-disabled

Цвет неактивных высококонтрастных элементов (позиций табуляции на линейке, символов сгруппированных ячеек).

По умолчанию: #666

canvas-cell-border

Цвет границ ячеек.

По умолчанию: rgba(0, 0, 0, 0.1)

canvas-cell-title-text

Цвет текста заголовков ячеек.

По умолчанию: #444

canvas-cell-title-background

Цвет фона заголовков ячеек.

По умолчанию: #f7f7f7

canvas-cell-title-background-hover

Цвет фона заголовков ячеек при наведении курсора.

По умолчанию: #dfdfdf

canvas-cell-title-background-selected

Цвет фона заголовков выделенных ячеек.

По умолчанию: #cfcfcf

canvas-cell-title-border

Цвет границ заголовков ячеек.

По умолчанию: #d8d8d8

canvas-cell-title-border-hover

Цвет границ заголовков ячеек при наведении курсора.

По умолчанию: #c9c9c9

canvas-cell-title-border-selected

Цвет границ заголовков выделенных ячеек.

По умолчанию: #bbb

canvas-scroll-thumb

Цвет ползунка прокрутки.

По умолчанию: #f1f1f1

canvas-scroll-thumb-hover

Цвет ползунка прокрутки при наведении курсора.

По умолчанию: #cfcfcf

canvas-scroll-thumb-pressed

Цвет нажатого ползунка прокрутки.

По умолчанию: #adadad

canvas-scroll-thumb-border

Цвет границ ползунка прокрутки.

По умолчанию: #cfcfcf

canvas-scroll-thumb-border-hover

Цвет границ ползунка прокрутки при наведении курсора.

По умолчанию: #cfcfcf

canvas-scroll-thumb-border-pressed

Цвет границ нажатого ползунка прокрутки.

По умолчанию: #adadad

canvas-scroll-arrow

Цвет стрелок прокрутки.

По умолчанию: #adadad

canvas-scroll-arrow-hover

Цвет стрелок прокрутки при наведении курсора.

По умолчанию: #f1f1f1

canvas-scroll-arrow-pressed

Цвет нажатых стрелок прокрутки.

По умолчанию: #f1f1f1

canvas-scroll-thumb-target

Цвет метки на ползунке прокрутки.

По умолчанию: #cfcfcf

canvas-scroll-thumb-target-hover

Цвет метки на ползунке прокрутки при наведении курсора.

По умолчанию: #f1f1f1

canvas-scroll-thumb-target-pressed

Цвет метки на нажатом ползунке прокрутки.

По умолчанию: #f1f1f1

canvas-sheet-view-cell-background

Цвет фона ячеек в режиме представления листа.

По умолчанию: #73bf91

canvas-sheet-view-cell-background-hover

Цвет фона ячеек в режиме представления листа при наведении курсора.

По умолчанию: #97e3b6

canvas-sheet-view-cell-background-pressed

Цвет фона нажатых ячеек в режиме представления листа.

По умолчанию: #aaffcc

canvas-sheet-view-cell-title-label

Цвет текста ячеек в режиме представления листа.

По умолчанию: #121212

canvas-sheet-view-select-all-icon

Цвет значка Выделить все ячейки в режиме представления листа.

По умолчанию: #3d664e

canvas-freeze-line-1px

Цвет линии закрепления областей с тенью.

По умолчанию: #818181

canvas-freeze-line-2px

Цвет линии закрепления областей без тени.

По умолчанию: #aaaaaa

canvas-select-all-icon

Цвет значка Выделить все ячейки.

По умолчанию: #82878f