Alterando temas de interface no ONLYOFFICE Docs

Introdução

Além dos temas de interface disponíveis (Claro, Clássico claro e Escuro), os editores do ONLYOFFICE agora podem ser personalizados com o seu próprio tema de cores. Siga as etapas deste guia para saber como fazer isso.

observação

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

1. Crie o arquivo .json, que deve 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 nas Configurações avançadas.
   • l10n: Define o nome localizado do tema. 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 iniciar com o prefixo theme-. Pode conter os caracteres a-Z, 1-9, -, _.
   • type: Define o tipo do tema, que pode ser dark ou light.
   • colors: Define o conjunto de cores do tema. As cores podem ser apresentadas nos formatos hexadecimal (HEX) ou RGBA. Consulte cores para obter detalhes sobre as variáveis de cor que este objeto pode conter.

2. 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 do Docs: sudo docker cp /home/username/folder_name/file_name {container_id}:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes

3. O cache do servidor para esta solicitação tem um tempo de vida de 5 minutos, portanto o tema ficará disponível 5 minutos depois. Você precisará atualizar a página do editor.

   observação

   Em alguns casos, também pode ser necessário reiniciar os serviços e limpar o cache.

4. Agora o tema será exibido na lista Tema da interface das Configurações avançadas e você poderá aplicá-lo à interface do editor.

Cores

Cores da barra de ferramentas do cabeçalho

toolbar-header-document

A cor do cabeçalho da barra de ferramentas para documentos de texto.

Padrão: #446995

toolbar-header-spreadsheet

A cor do cabeçalho da barra de ferramentas para planilhas.

Padrão: #40865c

toolbar-header-presentation

A cor do cabeçalho da barra de ferramentas para apresentações.

Padrão: #BE664F

toolbar-header-pdf

A cor do cabeçalho da barra de ferramentas para PDFs.

Padrão: #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.

Padrão: #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.

Padrão: #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.

Padrão: #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.

Padrão: #8D4444

Cores de fundo

background-normal

A cor de fundo de janelas, painéis suspensos e controles comuns.

Padrão: #fff

background-toolbar

A cor de fundo da barra de ferramentas, de todos os painéis, do cabeçalho das caixas de diálogo e dos painéis com botão na tela (cabeçalhos de controles de conteúdo, botões das opções de inserção ou de AutoCorreção).

Padrão: #f7f7f7

background-toolbar-additional

A cor de fundo adicional da barra de ferramentas. É usada para planilhas inativas nas planilhas.

Padrão: #efefef

background-primary-dialog-button

A cor de fundo do botão principal da caixa de diálogo.

Padrão: #444

background-accent-button

A cor de fundo do botão de destaque no editor de documentos de texto.

Padrão: #446995

background-tab-underline

A cor de fundo do sublinhado da guia na barra de ferramentas cinza.

Padrão: #444

background-notification-popover

A cor de fundo do pop-up de notificação (por exemplo, sobre o modo de revisão, o preenchimento de formulários etc.).

Padrão: #fcfed7

background-notification-badge

A cor de fundo dos selos de notificação dos ícones no cabeçalho da barra de ferramentas ou no painel esquerdo.

Padrão: #ffd112

background-scrim

A cor da sobreposição que reduz a intensidade do fundo das janelas modais.

Padrão: rgba(0, 0, 0, 0.2)

background-loader

A cor de fundo do indicador de carregamento.

Padrão: rgba(24, 24, 24, 0.9)

background-alt-key-hint

A cor de fundo das dicas de atalho dos botões quando a tecla Alt é pressionada.

Padrão: #FFD938

background-contrast-popover

A cor de fundo das dicas informativas.

Padrão: #fff

background-fill-button

A cor de fundo do botão no cabeçalho do formulário.

Padrão: #FFD112

shadow-contrast-popover

A cor de fundo da sombra das dicas informativas.

Padrão: rgba(0, 0, 0, 0.3)

Cores de realce

highlight-button-hover

A cor de realce de botões, itens de menus suspensos e outras listas interativas ao passar o mouse.

Padrão: #e0e0e0

highlight-button-pressed

A cor de realce do botão pressionado.

Padrão: #cbcbcb

highlight-button-pressed-hover

A cor de realce do botão pressionado ao passar o mouse.

Padrão: #bababa

highlight-primary-dialog-button-hover

A cor de realce do botão principal da caixa de diálogo ao passar o mouse.

Padrão: #1c1c1c

highlight-accent-button-hover

A cor de realce do botão de destaque ao passar o mouse.

Padrão: #375478

highlight-accent-button-pressed

A cor de realce do botão de destaque pressionado.

Padrão: #293f59

highlight-header-button-hover

A cor de realce do botão do cabeçalho ao passar o mouse.

Padrão: rgba(255, 255, 255, 0.15)

highlight-header-button-pressed

A cor de realce do botão do cabeçalho pressionado.

Padrão: rgba(255, 255, 255, 0.25)

highlight-toolbar-tab-underline

A cor de realce do sublinhado da guia ativa na barra de ferramentas cinza.

Padrão: #444

highlight-text-select

A cor de realce do texto selecionado nos controles comuns.

Padrão: #3494fb

highlight-fill-button-hover

A cor de realce do botão do cabeçalho do formulário ao passar o mouse.

Padrão: #FFE165

highlight-fill-button-pressed

A cor de fundo do botão pressionado no cabeçalho do formulário.

Padrão: #DFB500

Cores de borda

border-toolbar

A cor da borda da barra de ferramentas, dos painéis e das janelas modais.

Padrão: #cbcbcb

border-toolbar-active-panel-top

A cor da borda do painel ativo da barra de ferramentas superior.

Padrão: #f7f7f7

border-divider

A cor das bordas que separam os elementos da barra de ferramentas e dos painéis.

Padrão: #dfdfdf

border-regular-control

A cor da borda dos controles comuns.

Padrão: #c0c0c0

border-toolbar-button-hover

A cor geral da borda dos botões da barra de ferramentas agrupados ao passar o mouse.

Padrão: #e0e0e0

border-preview-hover

A cor da borda do elemento do controle de visualização ao passar o mouse (visualização de slides, estilos da barra de ferramentas).

Padrão: #bababa

border-preview-select

A cor da borda do elemento pressionado do controle de visualização (visualização de slides, estilos da barra de ferramentas).

Padrão: #888

border-control-focus

A cor da borda do controle comum em foco.

Padrão: #848484

border-color-shading

A cor da borda das cores da paleta.

Padrão: rgba(0, 0, 0, 0.15)

border-error

A cor da borda das caixas de entrada quando um valor inválido é inserido.

Padrão: #f62211

border-contrast-popover

A cor da borda da dica informativa.

Padrão: #fff

border-button-pressed-focus

A cor da borda do botão pressionado em foco.

Padrão: #848484

Cores do texto

text-normal

A cor padrão do texto.

Padrão: rgba(0, 0, 0, 0.8)

text-normal-pressed

A cor do texto do elemento ativo (da guia selecionada, do botão pressionado etc.).

Padrão: rgba(0, 0, 0, 0.8)

text-secondary

A cor do texto secundário (notas, explicações etc.).

Padrão: rgba(0, 0, 0, 0.6)

text-tertiary

A cor do texto terciário (espaços reservados).

Padrão: rgba(0, 0, 0, 0.4)

text-link

A cor do texto dos links e botões de link nos pop-ups de notificação.

Padrão: #445799

text-link-hover

A cor do texto dos links e botões de link nos pop-ups de notificação ao passar o mouse.

Padrão: #445799

text-link-active

A cor do texto dos links e botões de link pressionados nos pop-ups de notificação.

Padrão: #445799

text-link-visited

A cor do texto dos links e botões de link visitados nos pop-ups de notificação.

Padrão: #445799

text-inverse

A cor do texto sobre o fundo invertido da barra de ferramentas.

Padrão: #fff

text-toolbar-header

A cor do texto do cabeçalho da barra de ferramentas.

Padrão: #fff

text-contrast-background

A cor do texto para o fundo de contraste (indicador de carregamento, títulos de células nas predefinições de exibição da planilha).

Padrão: #fff

text-alt-key-hint

A cor do texto das dicas de atalho dos botões quando a tecla Alt é pressionada.

Padrão: rgba(0, 0, 0, 0.8)

Cores dos ícones

icon-normal

A cor do ícone.

Padrão: #444

icon-normal-pressed

A cor do ícone dos elementos ativos (guia selecionada, botão pressionado etc.).

Padrão: #444

icon-inverse

A cor invertida do ícone (atualmente, não é usada na interface).

Padrão: #fff

icon-toolbar-header

A cor do ícone no cabeçalho da barra de ferramentas (por exemplo, um ícone com as iniciais do usuário).

Padrão: #fff

icon-notification-badge

A cor do ícone dos selos de notificação no cabeçalho da barra de ferramentas ou no painel esquerdo.

Padrão: #000

icon-contrast-popover

A cor do ícone das dicas informativas de contraste (atualmente, não é usada na interface).

Padrão: #fff

icon-success

A cor das caixas de seleção de comentários resolvidos ou de outras indicações de sucesso.

Padrão: #090

Cor da tela

canvas-background

A cor de fundo da área de trabalho atrás da página do documento, da planilha ou do slide, o fundo dos cabeçalhos de coluna e o fundo da interface de agrupamento de colunas nas planilhas.

Padrão: #eee

canvas-content-background

A cor de fundo da página do documento, das células ou do slide.

Padrão: #fff

canvas-page-border

A cor da borda da página do documento.

Padrão: #ccc

canvas-ruler-background

A cor de fundo da régua.

Padrão: #fff

canvas-ruler-border

A cor da borda da régua.

Padrão: #cbcbcb

canvas-ruler-margins-background

A cor de fundo das margens da régua.

Padrão: #d9d9d9

canvas-ruler-mark

A cor das marcas da régua (marcas e texto).

Padrão: #555

canvas-ruler-handle-border

A cor da borda do marcador da régua.

Padrão: #555

canvas-ruler-handle-border-disabled

A cor da borda do marcador da régua desativado.

Padrão: #aaa

canvas-high-contrast

A cor dos elementos de alto contraste (marcas de tabulação na régua, símbolos de células agrupadas).

Padrão: #000

canvas-high-contrast-disabled

A cor dos elementos de alto contraste desativados (marcas de tabulação na régua, símbolos de células agrupadas).

Padrão: #666

canvas-cell-border

A cor da borda das células.

Padrão: rgba(0, 0, 0, 0.1)

canvas-cell-title-text

A cor do texto do título da célula.

Padrão: #444

canvas-cell-title-background

A cor de fundo do título da célula.

Padrão: #f7f7f7

canvas-cell-title-background-hover

A cor de fundo do título da célula ao passar o mouse.

Padrão: #dfdfdf

canvas-cell-title-background-selected

A cor de fundo do título da célula selecionada.

Padrão: #cfcfcf

canvas-cell-title-border

A cor da borda do título da célula.

Padrão: #d8d8d8

canvas-cell-title-border-hover

A cor da borda do título da célula ao passar o mouse.

Padrão: #c9c9c9

canvas-cell-title-border-selected

A cor da borda do título da célula selecionada.

Padrão: #bbb

canvas-scroll-thumb

A cor do controle deslizante da barra de rolagem.

Padrão: #f1f1f1

canvas-scroll-thumb-hover

A cor do controle deslizante da barra de rolagem ao passar o mouse.

Padrão: #cfcfcf

canvas-scroll-thumb-pressed

A cor do controle deslizante da barra de rolagem pressionado.

Padrão: #adadad

canvas-scroll-thumb-border

A cor da borda do controle deslizante da barra de rolagem.

Padrão: #cfcfcf

canvas-scroll-thumb-border-hover

A cor da borda do controle deslizante da barra de rolagem ao passar o mouse.

Padrão: #cfcfcf

canvas-scroll-thumb-border-pressed

A cor da borda do controle deslizante da barra de rolagem pressionado.

Padrão: #adadad

canvas-scroll-arrow

A cor da seta de rolagem.

Padrão: #adadad

canvas-scroll-arrow-hover

A cor da seta de rolagem ao passar o mouse.

Padrão: #f1f1f1

canvas-scroll-arrow-pressed

A cor da seta de rolagem pressionada.

Padrão: #f1f1f1

canvas-scroll-thumb-target

A cor da marca do controle deslizante da barra de rolagem.

Padrão: #cfcfcf

canvas-scroll-thumb-target-hover

A cor da marca do controle deslizante da barra de rolagem ao passar o mouse.

Padrão: #f1f1f1

canvas-scroll-thumb-target-pressed

A cor da marca do controle deslizante da barra de rolagem pressionado.

Padrão: #f1f1f1

canvas-sheet-view-cell-background

A cor de fundo da célula no modo Exibição de planilha.

Padrão: #73bf91

canvas-sheet-view-cell-background-hover

A cor de fundo da célula no modo Exibição de planilha ao passar o mouse.

Padrão: #97e3b6

canvas-sheet-view-cell-background-pressed

A cor de fundo da célula pressionada no modo Exibição de planilha.

Padrão: #aaffcc

canvas-sheet-view-cell-title-label

A cor do texto da célula no modo Exibição de planilha.

Padrão: #121212

canvas-sheet-view-select-all-icon

A cor do ícone Selecionar todas as células no modo Exibição de planilha.

Padrão: #3d664e

canvas-freeze-line-1px

A cor da linha de congelamento com sombra.

Padrão: #818181

canvas-freeze-line-2px

A cor da linha de congelamento sem sombra.

Padrão: #aaaaaa

canvas-select-all-icon

A cor do ícone Selecionar todas as células.

Padrão: #82878f