Este artículo está traducido por IA

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": "Tema asombroso",
    "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
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.

En algunos casos, también podrías necesitar reiniciar los servicios y limpiar la caché. Para más detalles sobre cómo limpiar la caché del servidor, puedes consultar la sección de Solución de problemas para Linux, o Docker.
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

Parámetro	Descripción	Por defecto
`toolbar-header-document`	El color del encabezado de la barra de herramientas para documentos de texto.	`#446995`
`toolbar-header-spreadsheet`	El color del encabezado de la barra de herramientas para hojas de cálculo.	`#40865c`
`toolbar-header-presentation`	El color del encabezado de la barra de herramientas para presentaciones.	`#BE664F`
`toolbar-header-pdf`	El color del encabezado de la barra de herramientas para PDFs.	`#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.	`#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.	`#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.	`#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.	`#8D4444`

Colores de fondo

Parámetro	Descripción	Por defecto
`background-normal`	El color de fondo de ventanas, paneles desplegables, controles regulares.	`#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).	`#f7f7f7`
`background-toolbar-additional`	El color de fondo adicional de la barra de herramientas. Se utiliza para hojas inactivas en hojas de cálculo.	`#efefef`
`background-primary-dialog-button`	El color de fondo del botón principal del cuadro de diálogo.	`#444`
`background-accent-button`	El color de fondo del botón de acento en el editor de documentos de texto.	`#446995`
`background-tab-underline`	El color de fondo de la subrayado de la pestaña para la barra de herramientas gris.	`#444`
`background-notification-popover`	El color de fondo del popover de notificación (por ejemplo, sobre el modo de revisión, rellenar formularios, etc.).	`#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.	`#ffd112`
`background-scrim`	El color del scrim que reduce la intensidad del fondo de las ventanas modales.	`rgba(0, 0, 0, 0.2)`
`background-loader`	El color de fondo del cargador.	`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.	`#FFD938`
`background-contrast-popover`	El color de fondo de las sugerencias de información.	`#fff`
`background-fill-button`	El color de fondo del botón de la cabecera del formulario.	`#FFD112`
`shadow-contrast-popover`	El color de fondo de la sombra de la sugerencia de información.	`rgba(0, 0, 0, 0.3)`

Colores de resaltado

Parámetro	Descripción	Por defecto
`highlight-button-hover`	El color de resaltado de los botones, elementos del menú desplegable y otras listas interactivas al pasar el ratón.	`#e0e0e0`
`highlight-button-pressed`	El color de resaltado del botón presionado.	`#cbcbcb`
`highlight-button-pressed-hover`	El color de resaltado del botón presionado al pasar el ratón.	`#bababa`
`highlight-primary-dialog-button-hover`	El color de resaltado del botón principal del diálogo al pasar el ratón.	`#1c1c1c`
`highlight-accent-button-hover`	El color de resaltado del botón de acento al pasar el ratón.	`#375478`
`highlight-accent-button-pressed`	El color de resaltado del botón de acento presionado.	`#293f59`
`highlight-header-button-hover`	El color de resaltado del botón de la cabecera al pasar el ratón.	`rgba(255, 255, 255, 0.15)`
`highlight-header-button-pressed`	El color de resaltado del botón de la cabecera presionado.	`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.	`#444`
`highlight-text-select`	El color de resaltado del texto seleccionado en los controles regulares.	`#3494fb`
`highlight-fill-button-hover`	El color de resaltado del botón de la cabecera del formulario al pasar el ratón.	`#FFE165`
`highlight-fill-button-pressed`	El color de fondo del botón presionado de la cabecera del formulario.	`#DFB500`

Colores de borde

Parámetro	Descripción	Por defecto
`border-toolbar`	El color del borde de la barra de herramientas, paneles y ventanas modales.	`#cbcbcb`
`border-toolbar-active-panel-top`	El color del borde del panel activo de la barra de herramientas superior.	`#f7f7f7`
`border-divider`	El color de los bordes que dividen la barra de herramientas y los elementos del panel.	`#dfdfdf`
`border-regular-control`	El color del borde de los controles regulares.	`#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.	`#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).	`#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).	`#888`
`border-control-focus`	El color del borde del control regular enfocado.	`#848484`
`border-color-shading`	El color del borde de los colores de la paleta.	`rgba(0, 0, 0, 0.15)`
`border-error`	El color del borde de las cajas de entrada al introducir un valor no válido.	`#f62211`
`border-contrast-popover`	El color del borde del consejo informativo.	`#fff`
`border-button-pressed-focus`	El color del borde del botón presionado enfocado.	`#848484`

Colores de texto

Parámetro	Descripción	Por defecto
`text-normal`	El color de texto 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.).	`rgba(0, 0, 0, 0.8)`
`text-secondary`	El color de texto secundario (notas, explicaciones, etc.).	`rgba(0, 0, 0, 0.6)`
`text-tertiary`	El color de texto terciario (marcadores de posición).	`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.	`#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.	`#445799`
`text-link-active`	El color de texto de los enlaces y botones de enlace presionados en los popovers de notificación.	`#445799`
`text-link-visited`	El color de texto de los enlaces y botones de enlace visitados en los popovers de notificación.	`#445799`
`text-inverse`	El color de texto sobre el fondo invertido de la barra de herramientas.	`#fff`
`text-toolbar-header`	El color de texto del encabezado de la barra de herramientas.	`#fff`
`text-contrast-background`	El color de texto para el fondo de contraste (cargador, títulos de celdas en las vistas predefinidas de hojas).	`#fff`
`text-alt-key-hint`	El color de texto de las sugerencias de atajos de botones cuando se presiona la tecla Alt.	`rgba(0, 0, 0, 0.8)`

Colores de iconos

Parámetro	Descripción	Por defecto
`icon-normal`	El color del icono.	`#444`
`icon-normal-pressed`	El color del icono de los elementos activos (pestaña seleccionada, botón presionado, etc.).	`#444`
`icon-inverse`	El color invertido del icono (actualmente, no se utiliza en la interfaz).	`#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).	`#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.	`#000`
`icon-contrast-popover`	El color del icono para las sugerencias de información de alto contraste (actualmente, no se utiliza en la interfaz).	`#fff`
`icon-success`	El color de las casillas de verificación de comentarios resueltos u otras indicaciones de éxito.	`#090`

Color del lienzo

Parámetro	Descripción	Por defecto
`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.	`#eee`
`canvas-content-background`	El color de fondo de la página del documento, celdas o diapositiva.	`#fff`
`canvas-page-border`	El color del borde de la página del documento.	`#ccc`
`canvas-ruler-background`	El color de fondo de la regla.	`#fff`
`canvas-ruler-border`	El color del borde de la regla.	`#cbcbcb`
`canvas-ruler-margins-background`	El color de fondo de los márgenes de la regla.	`#d9d9d9`
`canvas-ruler-mark`	El color de las marcas de la regla (objetivo y texto).	`#555`
`canvas-ruler-handle-border`	El color del borde del asa de la regla.	`#555`
`canvas-ruler-handle-border-disabled`	El color del borde del asa de la regla deshabilitada.	`#aaa`
`canvas-high-contrast`	El color de los elementos de alto contraste (marcas de pestañas en la regla, símbolos de celdas agrupadas).	`#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).	`#666`
`canvas-cell-border`	El color del borde de la celda.	`rgba(0, 0, 0, 0.1)`
`canvas-cell-title-text`	El color del texto del título de la celda.	`#444`
`canvas-cell-title-background`	El color de fondo del título de la celda.	`#f7f7f7`
`canvas-cell-title-background-hover`	El color de fondo del título de la celda al pasar el ratón.	`#dfdfdf`
`canvas-cell-title-background-selected`	El color de fondo del título de la celda seleccionada.	`#cfcfcf`
`canvas-cell-title-border`	El color del borde del título de la celda.	`#d8d8d8`
`canvas-cell-title-border-hover`	El color del borde del título de la celda al pasar el ratón.	`#c9c9c9`
`canvas-cell-title-border-selected`	El color del borde del título de la celda seleccionada.	`#bbb`
`canvas-scroll-thumb`	El color del deslizador de desplazamiento.	`#f1f1f1`
`canvas-scroll-thumb-hover`	El color del deslizador de desplazamiento al pasar el ratón.	`#cfcfcf`
`canvas-scroll-thumb-pressed`	El color del deslizador de desplazamiento presionado.	`#adadad`
`canvas-scroll-thumb-border`	El color del borde del deslizador de desplazamiento.	`#cfcfcf`
`canvas-scroll-thumb-border-hover`	El color del borde del deslizador de desplazamiento al pasar el ratón.	`#cfcfcf`
`canvas-scroll-thumb-border-pressed`	El color del borde del deslizador de desplazamiento presionado.	`#adadad`
`canvas-scroll-arrow`	El color de la flecha de desplazamiento.	`#adadad`
`canvas-scroll-arrow-hover`	El color de la flecha de desplazamiento al pasar el ratón.	`#f1f1f1`
`canvas-scroll-arrow-pressed`	El color de la flecha de desplazamiento presionada.	`#f1f1f1`
`canvas-scroll-thumb-target`	El color objetivo del deslizador de desplazamiento.	`#cfcfcf`
`canvas-scroll-thumb-target-hover`	El color objetivo del deslizador de desplazamiento al pasar el ratón.	`#f1f1f1`
`canvas-scroll-thumb-target-pressed`	El color objetivo del deslizador de desplazamiento presionado.	`#f1f1f1`
`canvas-sheet-view-cell-background`	El color de fondo de la celda en el modo Vista de Hoja.	`#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.	`#97e3b6`
`canvas-sheet-view-cell-background-pressed`	El color de fondo de la celda presionada en el modo Vista de Hoja.	`#aaffcc`
`canvas-sheet-view-cell-title-label`	El color del texto de la celda en el modo Vista de Hoja.	`#121212`
`canvas-sheet-view-select-all-icon`	El color del icono Seleccionar todas las celdas en el modo Vista de Hoja.	`#3d664e`
`canvas-freeze-line-1px`	El color de la línea de congelación con sombra.	`#818181`
`canvas-freeze-line-2px`	El color de la línea de congelación sin sombra.	`#aaaaaa`
`canvas-select-all-icon`	El color del icono Seleccionar todas las celdas.	`#82878f`