Alterando temas de interface no ONLYOFFICE Docs

Introdução

Além dos temas de interface disponíveis: claro, clássico e escuro, os editores ONLYOFFICE agora podem ser personalizados com seu próprio tema de cores. Siga as etapas deste guia para aprender como fazê-lo.

A capacidade de adicionar temas de interface personalizados está disponível a partir do ONLYOFFICE Docs v7.0.

Crie o arquivo .json que terá esta aparência:
```
{
    "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)"
        ...
    }
}
                
```
onde você precisa especificar os seguintes parâmetros:
- name: Define o nome do tema que será exibido no seletor de temas das configurações avançadas.
- l10n: Define o nome do tema localizado. As chaves do objeto são os códigos de idioma de duas letras (ru, de, it, etc.) e os valores são a tradução do nome do tema para cada idioma.
- id: Define o identificador único do tema, que deve começar com o prefixo theme-. Pode conter os caracteres a-Z, 1-9, -, _.
- type: Define o tipo de tema, que pode ser dark ou light.
- colors: Define o conjunto de cores do tema. As cores podem ser apresentadas nos formatos hex ou RGBA. Consulte cores para detalhes sobre as variáveis de cores que este objeto pode conter.
Coloque o arquivo criado no seguinte diretório:
- Windows: %ProgramFiles%\ONLYOFFICE\DocumentServer\web-apps\apps\common\main\resources\themes
- Linux: /var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes
- Docker: Copie o arquivo para o contêiner Docs: sudo docker cp /home/username/folder_name/file_name {container_id}:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes
O cache no servidor para esta solicitação tem um tempo de vida de 5 minutos, portanto o tema estará disponível 5 minutos depois. Você precisará atualizar a página do editor.

Em alguns casos, você também pode precisar reiniciar os serviços e limpar o cache. Para mais detalhes sobre como limpar o cache do servidor, você pode consultar a seção Solução de Problemas para Linux, ou Docker.
Agora o tema será exibido na lista Tema da interface das Configurações Avançadas e você pode aplicá-lo à interface do editor.

Cores

Cores da barra de ferramentas do cabeçalho

Parâmetro	Descrição	Padrão
`toolbar-header-document`	A cor do cabeçalho da barra de ferramentas para documentos de texto.	`#446995`
`toolbar-header-spreadsheet`	A cor do cabeçalho da barra de ferramentas para planilhas.	`#40865c`
`toolbar-header-presentation`	A cor do cabeçalho da barra de ferramentas para apresentações.	`#BE664F`
`toolbar-header-pdf`	A cor do cabeçalho da barra de ferramentas para pdfs.	`#AA5252`
`text-toolbar-header-on-background-document`	A cor do texto das iniciais do usuário no cabeçalho da barra de ferramentas de documentos de texto.	`#38567A`
`text-toolbar-header-on-background-spreadsheet`	A cor do texto das iniciais do usuário no cabeçalho da barra de ferramentas de planilhas.	`#336B49`
`text-toolbar-header-on-background-presentation`	A cor do texto das iniciais do usuário no cabeçalho da barra de ferramentas de apresentações.	`#854535`
`text-toolbar-header-on-background-pdf`	A cor do texto das iniciais do usuário no cabeçalho da barra de ferramentas de pdfs.	`#8D4444`

Cores de fundo

Parâmetro	Descrição	Padrão
`background-normal`	A cor de fundo das janelas, painéis suspensos, controles regulares.	`#fff`
`background-toolbar`	A cor de fundo da barra de ferramentas, todos os painéis, cabeçalho da caixa de diálogo, painéis com botão na tela (cabeçalhos de controles de conteúdo, botões para inserir ou opções de correção automática).	`#f7f7f7`
`background-toolbar-additional`	A cor de fundo adicional da barra de ferramentas. É usada para planilhas inativas em planilhas.	`#efefef`
`background-primary-dialog-button`	A cor de fundo do botão principal da caixa de diálogo.	`#444`
`background-accent-button`	A cor de fundo do botão de destaque no editor de documentos de texto.	`#446995`
`background-tab-underline`	A cor de fundo do sublinhado da aba para a barra de ferramentas cinza.	`#444`
`background-notification-popover`	A cor de fundo do popover de notificação (por exemplo, sobre o modo de revisão, preenchimento de formulários, etc.).	`#fcfed7`
`background-notification-badge`	A cor de fundo dos emblemas de notificação de ícones do cabeçalho da barra de ferramentas ou do painel do lado esquerdo.	`#ffd112`
`background-scrim`	A cor do scrim que reduz a intensidade do fundo das janelas modais.	`rgba(0, 0, 0, 0.2)`
`background-loader`	A cor de fundo do carregador.	`rgba(24, 24, 24, 0.9)`
`background-alt-key-hint`	A cor de fundo das dicas de atalho de botão quando a tecla Alt é pressionada.	`#FFD938`
`background-contrast-popover`	A cor de fundo das dicas de informação.	`#fff`
`background-fill-button`	A cor de fundo do botão do cabeçalho do formulário.	`#FFD112`
`shadow-contrast-popover`	A cor de fundo da sombra da dica de informação.	`rgba(0, 0, 0, 0.3)`

Cores de destaque

Parâmetro	Descrição	Padrão
`highlight-button-hover`	A cor de destaque de botões, itens de menu suspenso e outras listas interativas ao passar o mouse.	`#e0e0e0`
`highlight-button-pressed`	A cor de destaque do botão pressionado.	`#cbcbcb`
`highlight-button-pressed-hover`	A cor de destaque do botão pressionado ao passar o mouse.	`#bababa`
`highlight-primary-dialog-button-hover`	A cor de destaque do botão principal da caixa de diálogo ao passar o mouse.	`#1c1c1c`
`highlight-accent-button-hover`	A cor de destaque do botão de destaque ao passar o mouse.	`#375478`
`highlight-accent-button-pressed`	A cor de destaque do botão de destaque pressionado.	`#293f59`
`highlight-header-button-hover`	A cor de destaque do botão do cabeçalho ao passar o mouse.	`rgba(255, 255, 255, 0.15)`
`highlight-header-button-pressed`	A cor de destaque do botão do cabeçalho pressionado.	`rgba(255, 255, 255, 0.25)`
`highlight-toolbar-tab-underline`	A cor de destaque do sublinhado da aba ativa para a barra de ferramentas cinza.	`#444`
`highlight-text-select`	A cor de destaque do texto selecionado nos controles regulares.	`#3494fb`
`highlight-fill-button-hover`	A cor de destaque do botão do cabeçalho do formulário ao passar o mouse.	`#FFE165`
`highlight-fill-button-pressed`	A cor de fundo do botão pressionado do cabeçalho do formulário.	`#DFB500`

Cores de borda

Parâmetro	Descrição	Padrão
`border-toolbar`	A cor da borda da barra de ferramentas, painéis e janelas modais.	`#cbcbcb`
`border-toolbar-active-panel-top`	A cor da borda do painel ativo superior da barra de ferramentas.	`#f7f7f7`
`border-divider`	A cor das bordas que dividem os elementos da barra de ferramentas e do painel.	`#dfdfdf`
`border-regular-control`	A cor da borda dos controles regulares.	`#c0c0c0`
`border-toolbar-button-hover`	A cor da borda geral para botões da barra de ferramentas colocados juntos ao passar o mouse.	`#e0e0e0`
`border-preview-hover`	A cor da borda do elemento do controle de visualização ao passar o mouse (visualização de slide, estilos da barra de ferramentas).	`#bababa`
`border-preview-select`	A cor da borda do elemento pressionado do controle de visualização (visualização de slide, estilos da barra de ferramentas).	`#888`
`border-control-focus`	A cor da borda do controle regular focado.	`#848484`
`border-color-shading`	A cor da borda das cores da paleta.	`rgba(0, 0, 0, 0.15)`
`border-error`	A cor da borda das caixas de entrada ao inserir um valor inválido.	`#f62211`
`border-contrast-popover`	A cor da borda da dica de informação.	`#fff`
`border-button-pressed-focus`	A cor da borda do botão pressionado focado.	`#848484`

Cores de texto

Parâmetro	Descrição	Padrão
`text-normal`	A cor do texto padrão.	`rgba(0, 0, 0, 0.8)`
`text-normal-pressed`	A cor do texto do elemento ativo (da aba selecionada, botão pressionado, etc.).	`rgba(0, 0, 0, 0.8)`
`text-secondary`	A cor do texto secundário (notas, explicações, etc.).	`rgba(0, 0, 0, 0.6)`
`text-tertiary`	A cor do texto terciário (espaços reservados).	`rgba(0, 0, 0, 0.4)`
`text-link`	A cor do texto de links e botões de link nos popovers de notificação.	`#445799`
`text-link-hover`	A cor do texto de links e botões de link nos popovers de notificação ao passar o mouse.	`#445799`
`text-link-active`	A cor do texto de links pressionados e botões de link nos popovers de notificação.	`#445799`
`text-link-visited`	A cor do texto de links visitados e botões de link nos popovers de notificação.	`#445799`
`text-inverse`	A cor do texto no fundo invertido da barra de ferramentas.	`#fff`
`text-toolbar-header`	A cor do texto do cabeçalho da barra de ferramentas.	`#fff`
`text-contrast-background`	A cor do texto para o fundo de contraste (carregador, títulos de células em predefinições de visualização de planilha).	`#fff`
`text-alt-key-hint`	A cor do texto das dicas de atalho de botão quando a tecla Alt é pressionada.	`rgba(0, 0, 0, 0.8)`

Cores de ícone

Parâmetro	Descrição	Padrão
`icon-normal`	A cor do ícone.	`#444`
`icon-normal-pressed`	A cor do ícone dos elementos ativos (aba selecionada, botão pressionado, etc.).	`#444`
`icon-inverse`	A cor do ícone invertido (atualmente, não é usado na interface).	`#fff`
`icon-toolbar-header`	A cor do ícone do cabeçalho da barra de ferramentas (por exemplo, um ícone com as iniciais do usuário).	`#fff`
`icon-notification-badge`	A cor do ícone dos emblemas de notificação do cabeçalho da barra de ferramentas ou do painel do lado esquerdo.	`#000`
`icon-contrast-popover`	A cor do ícone para as dicas de informação de contraste (atualmente, não é usado na interface).	`#fff`
`icon-success`	A cor das caixas de seleção de comentários resolvidos ou outras indicações de sucesso.	`#090`

Cor da tela

Parâmetro	Descrição	Padrão
`canvas-background`	A cor de fundo do espaço de trabalho atrás da página do documento, planilha ou slide, fundo do cabeçalho da coluna e fundo da interface de agrupamento de colunas em planilhas.	`#eee`
`canvas-content-background`	A cor de fundo da página do documento, células ou slide.	`#fff`
`canvas-page-border`	A cor da borda da página do documento.	`#ccc`
`canvas-ruler-background`	A cor de fundo da régua.	`#fff`
`canvas-ruler-border`	A cor da borda da régua.	`#cbcbcb`
`canvas-ruler-margins-background`	A cor de fundo das margens da régua.	`#d9d9d9`
`canvas-ruler-mark`	A cor das marcas da régua (alvo e texto).	`#555`
`canvas-ruler-handle-border`	A cor da borda do manipulador da régua.	`#555`
`canvas-ruler-handle-border-disabled`	A cor da borda do manipulador da régua desabilitado.	`#aaa`
`canvas-high-contrast`	A cor dos elementos de alto contraste (marcas de tabulação na régua, símbolos de células agrupadas).	`#000`
`canvas-high-contrast-disabled`	A cor dos elementos de alto contraste desabilitados (marcas de tabulação na régua, símbolos de células agrupadas).	`#666`
`canvas-cell-border`	A cor da borda da célula.	`rgba(0, 0, 0, 0.1)`
`canvas-cell-title-text`	A cor do texto do título da célula.	`#444`
`canvas-cell-title-background`	A cor de fundo do título da célula.	`#f7f7f7`
`canvas-cell-title-background-hover`	A cor de fundo do título da célula ao passar o mouse.	`#dfdfdf`
`canvas-cell-title-background-selected`	A cor de fundo do título da célula selecionada.	`#cfcfcf`
`canvas-cell-title-border`	A cor da borda do título da célula.	`#d8d8d8`
`canvas-cell-title-border-hover`	A cor da borda do título da célula ao passar o mouse.	`#c9c9c9`
`canvas-cell-title-border-selected`	A cor da borda do título da célula selecionada.	`#bbb`
`canvas-scroll-thumb`	A cor do controle deslizante da barra de rolagem.	`#f1f1f1`
`canvas-scroll-thumb-hover`	A cor do controle deslizante da barra de rolagem ao passar o mouse.	`#cfcfcf`
`canvas-scroll-thumb-pressed`	A cor do controle deslizante da barra de rolagem pressionado.	`#adadad`
`canvas-scroll-thumb-border`	A cor da borda do controle deslizante da barra de rolagem.	`#cfcfcf`
`canvas-scroll-thumb-border-hover`	A cor da borda do controle deslizante da barra de rolagem ao passar o mouse.	`#cfcfcf`
`canvas-scroll-thumb-border-pressed`	A cor da borda do controle deslizante da barra de rolagem pressionado.	`#adadad`
`canvas-scroll-arrow`	A cor da seta da barra de rolagem.	`#adadad`
`canvas-scroll-arrow-hover`	A cor da seta da barra de rolagem ao passar o mouse.	`#f1f1f1`
`canvas-scroll-arrow-pressed`	A cor da seta da barra de rolagem pressionada.	`#f1f1f1`
`canvas-scroll-thumb-target`	A cor do alvo do controle deslizante da barra de rolagem.	`#cfcfcf`
`canvas-scroll-thumb-target-hover`	A cor do alvo do controle deslizante da barra de rolagem ao passar o mouse.	`#f1f1f1`
`canvas-scroll-thumb-target-pressed`	A cor do alvo do controle deslizante da barra de rolagem pressionado.	`#f1f1f1`
`canvas-sheet-view-cell-background`	A cor de fundo da célula no modo Visualização de Planilha.	`#73bf91`
`canvas-sheet-view-cell-background-hover`	A cor de fundo da célula no modo Visualização de Planilha ao passar o mouse.	`#97e3b6`
`canvas-sheet-view-cell-background-pressed`	A cor de fundo da célula pressionada no modo Visualização de Planilha.	`#aaffcc`
`canvas-sheet-view-cell-title-label`	A cor do texto da célula no modo Visualização de Planilha.	`#121212`
`canvas-sheet-view-select-all-icon`	A cor do ícone Selecionar todas as células no modo Visualização de Planilha.	`#3d664e`
`canvas-freeze-line-1px`	A cor da linha de congelamento com sombra.	`#818181`
`canvas-freeze-line-2px`	A cor da linha de congelamento sem sombra.	`#aaaaaa`
`canvas-select-all-icon`	A cor do ícone Selecionar todas as células.	`#82878f`