Los administradores eligen modo claro, oscuro o de sistema para toda la organización. El color de la marca impulsa botones, elementos activos de la barra lateral, anillos de enfoque y estados de hover — en ambos modos — sin una sola sobreescritura de CSS.
Tu panel no es una consola de administración genérica — es parte de tu producto. La tematización del panel te permite elegir modo claro, oscuro o de 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 componen un aspecto coherente:
Todo el panel adopta la elección instantáneamente para cada miembro de la organización. Los compañeros de equipo que no son administradores ven el tema elegido; solo los administradores/propietarios pueden cambiarlo.
Los temas se apilan limpiamente 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 en 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 en colores de marca claros, texto blanco en oscuros — utilizando la fórmula de luminancia WCAG. Puedes sobrescribir esa elección si el diseño lo requiere.
La mayoría de los sistemas de tematización fallan para colores de marca claros. Un color de marca amarillo pálido en un botón de guardar no debería producir un acento apenas visible al pasar el mouse. 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 abierta en el mismo navegador para volver a obtener y reaplicar — no se necesita recarga. A través de dispositivos y otros miembros, el nuevo tema aparece en la próxima carga de página.
La tematización se aplica al panel 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 deberían seguir la marca de ninguna organización. El marco fuerza el modo claro en esas rutas, por lo que navegar de un panel oscuro a la página de inicio de sesión se restablece limpiamente.
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án recibiendo soporte, no quién construyó la herramienta subyacente.