在 ONLYOFFICE 文档中更改界面主题

简介

除了现有的浅色、经典浅色和深色界面主题外，ONLYOFFICE 编辑器现在还可以自定义您自己的颜色主题。请按照本指南的步骤进行操作以了解如何实现。

备注

添加自定义界面主题的功能从 ONLYOFFICE 文档 v7.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：定义主题颜色集。颜色可以以十六进制或 RGBA 格式表示。有关此对象可以包含的颜色变量的详细信息，请参阅 colors。

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