在 ONLYOFFICE 文档中更改界面主题
简介
除了现有的浅色、经典浅色和深色界面主题外，ONLYOFFICE 编辑器现在还可以自定义您自己的颜色主题。请按照本指南的步骤进行操作以了解如何实现。
- 创建一个 .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。
-
将创建的文件放入以下目录：
- 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
- Windows：
-
服务器对此请求的缓存有效期为 5 分钟，因此主题将在 5 分钟后可用。您需要刷新编辑器页面。
现在，主题将显示在 界面主题 列表中的 高级设置 中，您可以将其应用于编辑器界面。
颜色
标题工具栏颜色
| 参数 | 描述 | 默认值 |
|---|---|---|
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 |
