Los administradores eligen el modo claro, oscuro o del sistema para toda la organización. El color de la marca determina los botones, los elementos activos de la barra lateral, los anillos de enfoque y los estados de desplazamiento, en ambos modos, sin necesidad de una sola anulación de CSS.
Tu panel de control no es una consola de administración genérica, es parte de tu producto. La personalización del panel te permite elegir el modo claro, oscuro o del sistema para toda la organización y hacer que el color de tu marca fluya a través de cada acento que utiliza la interfaz de usuario. Un botón de Guardar, dos minutos de configuración, sin desarrolladores.
Desde Configuración → Marca, los administradores y propietarios controlan tres cosas que se combinan en una apariencia coherente:
Todo el panel adopta la elección instantáneamente para cada miembro de la organización. Los compañeros que no son administradores ven el tema elegido; solo los administradores/propietarios pueden cambiarlo.
Los temas se apilan de manera limpia porque cada capa toca un conjunto diferente de variables CSS:
--primary, --ring, --accent, además de las variantes de la barra lateral. Los botones, elementos de navegación activos, anillos de enfoque y estados de hover adoptan el color de la marca en ambos modos.Debido a que el color de la marca solo pinta acentos, nunca obtienes texto ilegible sobre un fondo de tono medio o un botón claro que desaparece en modo oscuro. El sistema también elige automáticamente el color de texto correcto: texto negro sobre colores de marca claros, texto blanco sobre oscuros, utilizando la fórmula de luminancia WCAG. Puedes anular esa elección si el diseño lo requiere.
La mayoría de los sistemas de personalización fallan con colores de marca claros. Una marca de amarillo pálido en un botón de Guardar no debería producir un acento apenas visible al pasar el cursor. El algoritmo de tono de acento verifica la claridad de la marca: las marcas oscuras y medias obtienen un tono *más claro*, las marcas ya claras obtienen uno *más oscuro*. De cualquier manera, hay un paso de contraste significativo entre el primario y el acento, por lo que los estados de hover y enfoque siempre se leen claramente.
Cuando un administrador cambia el tema, un evento de transmisión activa cada pestaña de panel de control abierta en el mismo navegador para volver a obtener y reaplicar — no se necesita recargar. A través de dispositivos y otros miembros, el nuevo tema aparece en la próxima carga de página.
La personalización se aplica al panel de control de la organización y al centro de ayuda público. Las páginas de marketing, documentos y el inicio de sesión permanecen claros por diseño — se comparten entre todos los clientes y no deben seguir la marca de ninguna organización en particular. El marco obliga al modo claro en esas rutas, por lo que navegar de un panel oscuro a la página de inicio de sesión se reinicia de manera limpia.
Un panel que coincide con tu marca no es un detalle cosmético. Es la señal de que la plataforma es *tuyas*, no una herramienta SaaS genérica que estás alquilando. Cuando tu equipo de soporte y los autores de tu base de conocimientos inician sesión en algo que se parece a tu producto, lo tratan como parte de su trabajo, no como un panel de administración de terceros que toleran. Y cuando un cliente visita tu centro de ayuda de marca, la experiencia refuerza de quién está recibiendo soporte, no quién construyó la herramienta subyacente.