Cambiar temas de interfaz en ONLYOFFICE Docs
Introducción
Aparte de los temas de interfaz disponibles: claro, clásico claro y oscuro, los editores de ONLYOFFICE ahora se pueden personalizar con tu propio tema de color. Sigue los pasos de esta guía para aprender cómo hacerlo.
La capacidad de añadir temas de interfaz personalizados está disponible a partir de ONLYOFFICE Docs v7.0.
-
Crea el archivo .json que se verá así:
{"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)"...}}donde necesitas especificar los siguientes parámetros:
- name: Define el nombre del tema que se mostrará en el selector de temas de la configuración avanzada.
- l10n: Define el nombre del tema localizado. Las claves del objeto son los códigos de idioma de dos letras (ru, de, it, etc.) y los valores son la traducción del nombre del tema para cada idioma.
- id: Define el identificador único del tema, que debe comenzar con el prefijo theme-. Puede contener los signos a-Z, 1-9, -, _.
- type: Define el tipo de tema, que puede ser oscuro o claro.
- colors: Define el conjunto de colores del tema. Los colores pueden presentarse en formatos hex o RGBA. Consulta colores para obtener detalles sobre las variables de color que este objeto puede contener.
-
Coloca el archivo creado en el siguiente directorio:
- Windows:
%ProgramFiles%\ONLYOFFICE\DocumentServer\web-apps\apps\common\main\resources\themes - Linux:
/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes - Docker: Copia el archivo en el contenedor de Docs:
sudo docker cp /home/username/folder_name/file_name {container_id}:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes
- Windows:
-
La caché en el servidor para esta solicitud tiene una duración de 5 minutos, por lo que el tema estará disponible 5 minutos después. Necesitarás actualizar la página del editor.
notaEn algunos casos, también podrías necesitar reiniciar los servicios y limpiar la caché.
-
Ahora el tema se mostrará en la lista de Tema de interfaz de la Configuración avanzada y podrás aplicarlo a la interfaz del editor.
Colores
Colores de la barra de herramientas del encabezado
toolbar-header-document
El color del encabezado de la barra de herramientas para documentos de texto.
Por defecto: #446995
toolbar-header-spreadsheet
El color del encabezado de la barra de herramientas para hojas de cálculo.
Por defecto: #40865c
toolbar-header-presentation
El color del encabezado de la barra de herramientas para presentaciones.
Por defecto: #BE664F
toolbar-header-pdf
El color del encabezado de la barra de herramientas para PDFs.
Por defecto: #AA5252
text-toolbar-header-on-background-document
El color del texto de las iniciales del usuario en el encabezado de la barra de herramientas de documentos de texto.
Por defecto: #38567A
text-toolbar-header-on-background-spreadsheet
El color del texto de las iniciales del usuario en el encabezado de la barra de herramientas de hojas de cálculo.
Por defecto: #336B49
text-toolbar-header-on-background-presentation
El color del texto de las iniciales del usuario en el encabezado de la barra de herramientas de presentaciones.
Por defecto: #854535
text-toolbar-header-on-background-pdf
El color del texto de las iniciales del usuario en el encabezado de la barra de herramientas de PDFs.
Por defecto: #8D4444
Colores de fondo
background-normal
El color de fondo de ventanas, paneles desplegables, controles regulares.
Por defecto: #fff
background-toolbar
El color de fondo de la barra de herramientas, todos los paneles, encabezado de cuadros de diálogo, paneles con botón en el lienzo (encabezados de controles de contenido, botones para opciones de inserción o autocorrección).
Por defecto: #f7f7f7
background-toolbar-additional
El color de fondo adicional de la barra de herramientas. Se utiliza para hojas inactivas en hojas de cálculo.
Por defecto: #efefef
background-primary-dialog-button
El color de fondo del botón principal del cuadro de diálogo.
Por defecto: #444
background-accent-button
El color de fondo del botón de acento en el editor de documentos de texto.
Por defecto: #446995
background-tab-underline
El color de fondo de la subrayado de la pestaña para la barra de herramientas gris.
Por defecto: #444
background-notification-popover
El color de fondo del popover de notificación (por ejemplo, sobre el modo de revisión, rellenar formularios, etc.).
Por defecto: #fcfed7
background-notification-badge
El color de fondo de los iconos de notificación en la cabecera de la barra de herramientas o el panel lateral izquierdo.
Por defecto: #ffd112
background-scrim
El color del scrim que reduce la intensidad del fondo de las ventanas modales.
Por defecto: rgba(0, 0, 0, 0.2)
background-loader
El color de fondo del cargador.
Por defecto: rgba(24, 24, 24, 0.9)
background-alt-key-hint
El color de fondo de las sugerencias de atajos de botones cuando se presiona la tecla Alt.
Por defecto: #FFD938
background-contrast-popover
El color de fondo de las sugerencias de información.
Por defecto: #fff
background-fill-button
El color de fondo del botón de la cabecera del formulario.
Por defecto: #FFD112
shadow-contrast-popover
El color de fondo de la sombra de la sugerencia de información.
Por defecto: rgba(0, 0, 0, 0.3)
Colores de resaltado
highlight-button-hover
El color de resaltado de los botones, elementos del menú desplegable y otras listas interactivas al pasar el ratón.
Por defecto: #e0e0e0
highlight-button-pressed
El color de resaltado del botón presionado.
Por defecto: #cbcbcb
highlight-button-pressed-hover
El color de resaltado del botón presionado al pasar el ratón.
Por defecto: #bababa
highlight-primary-dialog-button-hover
El color de resaltado del botón principal del diálogo al pasar el ratón.
Por defecto: #1c1c1c
highlight-accent-button-hover
El color de resaltado del botón de acento al pasar el ratón.
Por defecto: #375478
highlight-accent-button-pressed
El color de resaltado del botón de acento presionado.
Por defecto: #293f59
highlight-header-button-hover
El color de resaltado del botón de la cabecera al pasar el ratón.
Por defecto: rgba(255, 255, 255, 0.15)
highlight-header-button-pressed
El color de resaltado del botón de la cabecera presionado.
Por defecto: rgba(255, 255, 255, 0.25)
highlight-toolbar-tab-underline
El color de resaltado del subrayado de la pestaña activa para la barra de herramientas gris.
Por defecto: #444
highlight-text-select
El color de resaltado del texto seleccionado en los controles regulares.
Por defecto: #3494fb
highlight-fill-button-hover
El color de resaltado del botón de la cabecera del formulario al pasar el ratón.
Por defecto: #FFE165
highlight-fill-button-pressed
El color de fondo del botón presionado de la cabecera del formulario.
Por defecto: #DFB500
Colores de borde
border-toolbar
El color del borde de la barra de herramientas, paneles y ventanas modales.
Por defecto: #cbcbcb
border-toolbar-active-panel-top
El color del borde del panel activo de la barra de herramientas superior.
Por defecto: #f7f7f7
border-divider
El color de los bordes que dividen la barra de herramientas y los elementos del panel.
Por defecto: #dfdfdf
border-regular-control
El color del borde de los controles regulares.
Por defecto: #c0c0c0
border-toolbar-button-hover
El color general del borde para los botones de la barra de herramientas colocados juntos al pasar el ratón.
Por defecto: #e0e0e0
border-preview-hover
El color del borde del elemento del control de vista previa al pasar el ratón (vista previa de diapositivas, estilos de barra de herramientas).
Por defecto: #bababa
border-preview-select
El color del borde del elemento presionado del control de vista previa (vista previa de diapositivas, estilos de barra de herramientas).
Por defecto: #888
border-control-focus
El color del borde del control regular enfocado.
Por defecto: #848484
border-color-shading
El color del borde de los colores de la paleta.
Por defecto: rgba(0, 0, 0, 0.15)
border-error
El color del borde de las cajas de entrada al introducir un valor no válido.
Por defecto: #f62211
border-contrast-popover
El color del borde del consejo informativo.
Por defecto: #fff
border-button-pressed-focus
El color del borde del botón presionado enfocado.
Por defecto: #848484
Colores de texto
text-normal
El color de texto por defecto.
Por defecto: rgba(0, 0, 0, 0.8)
text-normal-pressed
El color de texto del elemento activo (de la pestaña seleccionada, botón presionado, etc.).
Por defecto: rgba(0, 0, 0, 0.8)
text-secondary
El color de texto secundario (notas, explicaciones, etc.).
Por defecto: rgba(0, 0, 0, 0.6)
text-tertiary
El color de texto terciario (marcadores de posición).
Por defecto: rgba(0, 0, 0, 0.4)
text-link
El color de texto de los enlaces y botones de enlace en los popovers de notificación.
Por defecto: #445799
text-link-hover
El color de texto de los enlaces y botones de enlace en los popovers de notificación al pasar el ratón.
Por defecto: #445799
text-link-active
El color de texto de los enlaces y botones de enlace presionados en los popovers de notificación.
Por defecto: #445799
text-link-visited
El color de texto de los enlaces y botones de enlace visitados en los popovers de notificación.
Por defecto: #445799
text-inverse
El color de texto sobre el fondo invertido de la barra de herramientas.
Por defecto: #fff
text-toolbar-header
El color de texto del encabezado de la barra de herramientas.
Por defecto: #fff
text-contrast-background
El color de texto para el fondo de contraste (cargador, títulos de celdas en las vistas predefinidas de hojas).
Por defecto: #fff
text-alt-key-hint
El color de texto de las sugerencias de atajos de botones cuando se presiona la tecla Alt.
Por defecto: rgba(0, 0, 0, 0.8)
Colores de iconos
icon-normal
El color del icono.
Por defecto: #444
icon-normal-pressed
El color del icono de los elementos activos (pestaña seleccionada, botón presionado, etc.).
Por defecto: #444
icon-inverse
El color invertido del icono (actualmente, no se utiliza en la interfaz).
Por defecto: #fff
icon-toolbar-header
El color del icono de la cabecera de la barra de herramientas (por ejemplo, un icono con las iniciales del usuario).
Por defecto: #fff
icon-notification-badge
El color del icono de las insignias de notificación de la cabecera de la barra de herramientas o del panel lateral izquierdo.
Por defecto: #000
icon-contrast-popover
El color del icono para las sugerencias de información de alto contraste (actualmente, no se utiliza en la interfaz).
Por defecto: #fff
icon-success
El color de las casillas de verificación de comentarios resueltos u otras indicaciones de éxito.
Por defecto: #090
Color del lienzo
canvas-background
El color de fondo del área de trabajo detrás de la página del documento, hoja o diapositiva, el fondo del encabezado de columna y el fondo de la interfaz de agrupación de columnas en hojas de cálculo.
Por defecto: #eee
canvas-content-background
El color de fondo de la página del documento, celdas o diapositiva.
Por defecto: #fff
canvas-page-border
El color del borde de la página del documento.
Por defecto: #ccc
canvas-ruler-background
El color de fondo de la regla.
Por defecto: #fff
canvas-ruler-border
El color del borde de la regla.
Por defecto: #cbcbcb
canvas-ruler-margins-background
El color de fondo de los márgenes de la regla.
Por defecto: #d9d9d9
canvas-ruler-mark
El color de las marcas de la regla (objetivo y texto).
Por defecto: #555
canvas-ruler-handle-border
El color del borde del asa de la regla.
Por defecto: #555
canvas-ruler-handle-border-disabled
El color del borde del asa de la regla deshabilitada.
Por defecto: #aaa
canvas-high-contrast
El color de los elementos de alto contraste (marcas de pestañas en la regla, símbolos de celdas agrupadas).
Por defecto: #000
canvas-high-contrast-disabled
El color de los elementos de alto contraste deshabilitados (marcas de pestañas en la regla, símbolos de celdas agrupadas).
Por defecto: #666
canvas-cell-border
El color del borde de la celda.
Por defecto: rgba(0, 0, 0, 0.1)
canvas-cell-title-text
El color del texto del título de la celda.
Por defecto: #444
canvas-cell-title-background
El color de fondo del título de la celda.
Por defecto: #f7f7f7
canvas-cell-title-background-hover
El color de fondo del título de la celda al pasar el ratón.
Por defecto: #dfdfdf
canvas-cell-title-background-selected
El color de fondo del título de la celda seleccionada.
Por defecto: #cfcfcf
canvas-cell-title-border
El color del borde del título de la celda.
Por defecto: #d8d8d8
canvas-cell-title-border-hover
El color del borde del título de la celda al pasar el ratón.
Por defecto: #c9c9c9
canvas-cell-title-border-selected
El color del borde del título de la celda seleccionada.
Por defecto: #bbb
canvas-scroll-thumb
El color del deslizador de desplazamiento.
Por defecto: #f1f1f1
canvas-scroll-thumb-hover
El color del deslizador de desplazamiento al pasar el ratón.
Por defecto: #cfcfcf
canvas-scroll-thumb-pressed
El color del deslizador de desplazamiento presionado.
Por defecto: #adadad
canvas-scroll-thumb-border
El color del borde del deslizador de desplazamiento.
Por defecto: #cfcfcf
canvas-scroll-thumb-border-hover
El color del borde del deslizador de desplazamiento al pasar el ratón.
Por defecto: #cfcfcf
canvas-scroll-thumb-border-pressed
El color del borde del deslizador de desplazamiento presionado.
Por defecto: #adadad
canvas-scroll-arrow
El color de la flecha de desplazamiento.
Por defecto: #adadad
canvas-scroll-arrow-hover
El color de la flecha de desplazamiento al pasar el ratón.
Por defecto: #f1f1f1
canvas-scroll-arrow-pressed
El color de la flecha de desplazamiento presionada.
Por defecto: #f1f1f1
canvas-scroll-thumb-target
El color objetivo del deslizador de desplazamiento.
Por defecto: #cfcfcf
canvas-scroll-thumb-target-hover
El color objetivo del deslizador de desplazamiento al pasar el ratón.
Por defecto: #f1f1f1
canvas-scroll-thumb-target-pressed
El color objetivo del deslizador de desplazamiento presionado.
Por defecto: #f1f1f1
canvas-sheet-view-cell-background
El color de fondo de la celda en el modo Vista de Hoja.
Por defecto: #73bf91
canvas-sheet-view-cell-background-hover
El color de fondo de la celda en el modo Vista de Hoja al pasar el ratón.
Por defecto: #97e3b6
canvas-sheet-view-cell-background-pressed
El color de fondo de la celda presionada en el modo Vista de Hoja.
Por defecto: #aaffcc
canvas-sheet-view-cell-title-label
El color del texto de la celda en el modo Vista de Hoja.
Por defecto: #121212
canvas-sheet-view-select-all-icon
El color del icono Seleccionar todas las celdas en el modo Vista de Hoja.
Por defecto: #3d664e
canvas-freeze-line-1px
El color de la línea de congelación con sombra.
Por defecto: #818181
canvas-freeze-line-2px
El color de la línea de congelación sin sombra.
Por defecto: #aaaaaa
canvas-select-all-icon
El color del icono Seleccionar todas las celdas.
Por defecto: #82878f