> For the complete documentation index, see [llms.txt](https://docs.verge.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.verge.io/run-the-platform/es/administracion-del-sistema/themes.md). # Funcionalidad de temas de VergeOS VergeOS ofrece un sistema de Temas integral que permite a los administradores personalizar la apariencia visual de la interfaz de usuario. La funcionalidad de Temas ofrece un control granular sobre los colores en diferentes componentes de la UI, incluidos gráficos, elementos de navegación, encabezados, cargadores y elementos generales de la interfaz. ## Descripción general El sistema de Temas de VergeOS permite a las organizaciones crear temas visuales personalizados que modifican los colores de la interfaz y los elementos de la marca. Esta funcionalidad va más allá del branding básico de la UI al proporcionar un control detallado sobre grupos específicos de componentes de la UI, lo que permite una personalización visual completa que puede alinearse con la identidad corporativa o mejorar la experiencia del usuario. ## Lo que aprenderás Esta guía explica la funcionalidad de Temas de VergeOS, incluido dónde acceder a las funciones de temas, qué opciones de personalización están disponibles y cómo los diferentes componentes del tema funcionan juntos para crear una apariencia de interfaz coherente. Entenderás: * Dónde encontrar la gestión de temas en VergeOS * Qué grupos de propiedades de tema están disponibles para personalización * Cómo funciona la creación y gestión de temas * Qué formatos de archivo y recursos son compatibles * Cómo se integran los temas con el sistema de branding de la UI existente ## Requisitos **Configuración del entorno:** * Acceso administrativo (permisos de Administrador del clúster o Administrador del inquilino) **Conocimientos previos:** * Navegación básica de VergeOS y acceso a la configuración del sistema ## Estimación de tiempo **Tiempo de exploración:** 10-15 minutos para comprender todas las opciones y funcionalidades de los temas ## Acceso a la gestión de temas ### Ruta de navegación El sistema de Temas se encuentra dentro de la configuración del sistema de VergeOS, accesible a través de la interfaz administrativa. 1. **Accede a la Configuración del sistema**: Navegue a **Sistema** > **Configuración** para acceder al área de configuración del sistema 2. **Ubicación de la gestión de temas**: * En el menú de navegación izquierdo de Configuración del sistema, encontrarás **Temas** como una sección dedicada * El área de Temas muestra los temas existentes en un formato de tabla con columnas de Nombre, Descripción y Fecha de modificación ### Interfaz de gestión de temas La página de Configuración del sistema muestra los temas existentes en la **Temas** sección, mostrando: * **Nombre**: El identificador del tema (por ejemplo, "light") * **Descripción**: Descripción del tema (por ejemplo, "Paquete de tema claro para Verge.io") * **Modificado**: Fecha y hora de la última modificación ## Creación y gestión de temas ### Creación de nuevos temas **Acceso a nuevo tema**: Haga clic en **Nuevo tema** en el menú de navegación izquierdo para acceder a la interfaz de creación de temas. **Componentes de la interfaz de creación de temas**: #### Configuración básica del tema * **Campo Nombre**: Campo obligatorio para la identificación del tema * **Campo Descripción**: Texto descriptivo opcional para la documentación del tema * **Alternador de habilitación**: Activa o desactiva el tema * **Desplegable Basado en**: Elige entre "Tema claro del sistema" o "Tema oscuro del sistema" como base #### Grupos de propiedades de color La sección de Colores organiza los elementos personalizables de la UI en grupos lógicos: **Gráficos**: * Seis propiedades de color de gráficos individuales (Gráfico 1-6) * Cada propiedad controla los colores de diferentes series de datos en gráficos y visualizaciones * Incluye selector de color, entrada de valor hexadecimal, control deslizante de opacidad y funcionalidad de reinicio individual **Cargador**: * **Propiedad del cargador**: Controla la apariencia del indicador principal de carga * **Seguidor del cargador**: Configura los colores de los elementos animados de carga * Vista previa en tiempo real de las animaciones de carga **Navegación izquierda**: * **Fondo**: Color de fondo del panel de navegación * **Texto**: Color de texto estándar de la navegación * **Hover**: Color de fondo para los estados al pasar el cursor * **Texto de hover**: Color del texto durante las interacciones de hover * **Texto deshabilitado**: Color para los elementos de navegación inactivos **Encabezado**: * **Fondo**: Fondo de la barra principal del encabezado * **Botón activo**: Resaltado del botón activo * **Texto del botón**: Color de texto estándar del botón * **Texto del botón al pasar el cursor**: Color del texto durante el hover del botón * **Fondo de la barra de navegación**: Color del área de navegación del subencabezado **General**: * **Fondo**: Fondo general de la aplicación * **Fondo de la tarjeta**: Fondo para componentes de estilo tarjeta * **Borde de la tarjeta**: Colores de borde para paneles y tarjetas * **Texto**: Color de texto principal en toda la interfaz #### Gestión de recursos **Opciones de logotipo personalizado**: * **Logotipo personalizado (grande)**: Imágenes de 144x36 píxeles para la visualización estándar del logotipo * **Logotipo personalizado (pequeño)**: Imágenes de 44x44 píxeles para áreas compactas * Formatos compatibles: JPG, PNG, SVG **Favicon personalizado**: * Compatibilidad con el formato de archivo ICO para la personalización de la pestaña del navegador * Enlaces a la sección de Archivos para la gestión de la carga de recursos #### Herramientas de personalización de color **Controles de propiedades individuales**: * **Selector de color**: Interfaz visual de selección de color * **Entrada de valor hexadecimal**: Entrada directa de códigos de color hexadecimales * **Control deslizante de opacidad**: Control de transparencia para cada propiedad de color * **Botón de reinicio**: Restablecimiento individual de la propiedad a los valores predeterminados * **Restablecimiento global**: Enlace "Restablecer" para restaurar todas las propiedades de un grupo #### Funcionalidad de vista previa **Vista previa en tiempo real**: * **Sección de vista previa**: Muestra una representación en vivo de los cambios del tema * **Vistas previas contextuales**: Diferentes visualizaciones según el grupo de propiedades seleccionado * **Elementos interactivos**: La vista previa incluye estados de hover y componentes interactivos ## Explicación de los grupos de propiedades del tema ### Grupo de propiedades de gráficos Controla la paleta de colores para gráficos, diagramas y visualizaciones de datos en todo VergeOS. Cada propiedad de Gráfico (1-6) representa colores de diferentes series de datos, lo que permite una identidad visual coherente para la visualización de datos en paneles e interfaces de informes. ### Grupo de propiedades del cargador Gestiona la apariencia de los indicadores de carga y los elementos de progreso. La propiedad del cargador controla el color del spinner o la barra de progreso principal, mientras que el seguidor del cargador gestiona los elementos animados dentro de las interfaces de carga. ### Grupo de propiedades de navegación izquierda Personaliza el panel de navegación principal que aparece en el lado izquierdo de la interfaz de VergeOS. Las propiedades controlan los colores de fondo, los colores del texto y los estados interactivos para garantizar que la navegación siga siendo funcional y visualmente coherente. ### Grupo de propiedades del encabezado Gestiona la barra superior del encabezado y sus componentes, incluidos los botones, los elementos de navegación y los colores de fondo. Estos ajustes afectan al encabezado principal de la interfaz que contiene la navegación del sistema y los controles del usuario. ### Grupo de propiedades generales Controla los elementos fundamentales de la interfaz, incluidos los fondos generales, los componentes de tarjeta, los bordes y los colores de texto principales. Estas propiedades establecen la apariencia visual base sobre la que se construyen los demás componentes. ## Integración con la marca existente ### Integración de recursos Los logotipos y favicons personalizados cargados a través del sistema de Temas se integran con los esquemas de color para proporcionar una personalización visual completa. Los recursos conservan su calidad y posicionamiento mientras se adaptan a la paleta de colores elegida. ## Aplicación y gestión del tema ### Activación del tema Los temas se aplican inmediatamente al guardarlos con el botón Enviar. El alternador de habilitación permite crear y almacenar temas sin activación inmediata. ### Jerarquía de temas En entornos multiinquilino, los temas se aplican al nivel actual del inquilino y se heredan a los niveles inferiores a menos que se sobrescriban. Esto permite una marca coherente en todas las jerarquías organizativas, al tiempo que permite la personalización donde sea necesario. ### Persistencia del tema La configuración de temas se almacena como parte de la configuración del sistema de VergeOS y persiste a través de actualizaciones y reinicios del sistema. Las configuraciones de temas se pueden exportar e importar como parte de los procesos de copia de seguridad y restauración del sistema. ## Formatos de archivo y especificaciones compatibles ### Requisitos del logotipo * **Logotipo grande**: 144x36 píxeles, formatos JPG/PNG/SVG * **Logotipo pequeño**: 44x44 píxeles, formatos JPG/PNG/SVG * Recomendaciones de tamaño de archivo: menos de 1 MB para un rendimiento óptimo ### Especificaciones del favicon * **Formato**: Se requiere el formato de archivo ICO * **Tamaños recomendados**: 16x16, 32x32, 48x48 píxeles dentro de un único archivo ICO * Compatibilidad de respaldo con el formato PNG en navegadores modernos ### Compatibilidad con formatos de color * **Valores hexadecimales**: Códigos de color hexadecimales estándar de 6 dígitos (#RRGGBB) * **Opacidad**: Transparencia basada en porcentaje (0-100%) * **Selector de color**: Interfaz visual de selección RGB/HSV * **Funcionalidad de reinicio**: Retorno inmediato a los valores predeterminados del sistema La funcionalidad de Temas de VergeOS ofrece capacidades integrales de personalización visual que permiten a las organizaciones crear interfaces coherentes y con marca, manteniendo al mismo tiempo la usabilidad y los estándares de accesibilidad en toda su plataforma de virtualización. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.verge.io/run-the-platform/es/administracion-del-sistema/themes.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.