En Experience Builder, el tema es un conjunto de especificaciones de diseño que definen gran parte de la apariencia de su aplicación. Puede utilizar la configuración del tema para definir colores, fuentes, estilos de botones y otros ajustes de apariencia de forma global en toda la aplicación, en lugar de tener que cambiar estos ajustes para cada widget y otros elementos de la aplicación.
Los ajustes del tema define los colores primarios y secundarios, los colores funcionales que indican información, éxito, advertencias, errores y colores neutros, y todos se pueden personalizar para garantizar que la identidad visual de la aplicación sea coherente con la marca de su organización o con sus preferencias personales. Puede definir los colores de las superficies, como páginas, celdas de widgets de tabla y ventanas, y los colores de los elementos interactivos, como botones desplegables, interruptores de encendido y apagado, y el indicador de enfoque del teclado. El tema también afecta a la tipografía, el radio del borde de los elementos de la aplicación, el estilo de subrayado del texto de los enlaces y mucho más. El tema no afecta al diseño ni al contenido de la aplicación.
El tema define la apariencia predeterminada de numerosos elementos de la aplicación, pero en la configuración de los widgets, las páginas y otros elementos se puede anular el tema de la aplicación para cambiar la apariencia de un elemento particular.
Para ver los ajustes del tema de una aplicación o plantilla de Experience Builder, haga clic en Tema para abrir el panel Tema.
Elegir un tema
Al abrir el panel Tema, aparece una lista de temas prediseñados. Los iconos de las miniaturas de los temas indican si cada tema es claro 
u oscuro 
.
Puede elegir entre los siguientes temas prediseñados:
- Prime: un tema claro con azul y morado como colores principal y secundario. Este es el tema predeterminado.
- Astro: un tema oscuro con azul y morado como colores principal y secundario.
- Océano: un tema claro con azul y verde como colores principal y secundario.
- Terciopelo: un tema claro con rojo y azul como colores principal y secundario.
- Abismo: un tema oscuro con morado y azul como colores principal y secundario.
- Pradera: un tema claro con verde y marrón como colores principal y secundario.
- Tema compartido: sincronice el tema con los ajustes del tema compartido en su organización. . No puede personalizar el color, la tipografía ni ningún otro ajuste del tema cuando elige este tema. Si no elige este tema, puede seguir eligiendo colores del tema compartido de la organización cuando configure los ajustes de color para un widget.
Nota:
La actualización de ArcGIS Online de octubre de 2025 introdujo un nuevo sistema de temas. Todas las aplicaciones creadas después de esta actualización utilizan el nuevo sistema. Las aplicaciones creadas antes de esta actualización conservan sus temas del sistema anterior, a menos que cambie los temas en la configuración de Temas.
Tenga en cuenta que si cambia una aplicación existente de un tema antiguo a uno nuevo, algunas partes de la aplicación pueden tener un aspecto inesperado, ya que las distintas variables del tema no se asignan de la misma manera. Se recomienda mantener el tema antiguo de la aplicación.
Si cambia a un tema nuevo, elija un tema con el mismo modo que el antiguo. Cambie de un tema claro antiguo a un tema claro nuevo, o de un tema oscuro antiguo a un tema oscuro nuevo.
Personalizar el tema
Una vez que haya elegido un tema, haga clic en Personalizar para mostrar sus ajustes adicionales.
Nota:
Haga clic en Restablecer para restaurar los ajustes predeterminados de un tema.
Configuración de colores
La configuración de la pestaña Color define los colores de las diferentes partes de la aplicación.
Puede utilizar el componente selector de color para definir los colores de la marca, los colores de las funciones, los colores neutros, los colores de las superficies y los colores de los elementos interactivos.
Colores de la marca y de las funciones
Los colores de la marca son los colores que se utilizan con más frecuencia en la aplicación. Son los colores principales que se utilizan para llamar la atención y comunicar la interactividad.
- Los colores primarios están destinados a los componentes más destacados de la interfaz de usuario, como los botones de acción flotantes, los botones de alto énfasis y los estados activos. Debe utilizarlos para rellenos, texto e iconos de énfasis elevado.
- Los colores secundarios están destinados a rellenos, texto e iconos menos destacados de la interfaz de usuario.
Los colores de función se utilizan en mensajes de alerta, como los mensajes que aparecen cuando los widgets ejecutan correctamente una tarea.
- Los colores de información se utilizan para mensajes informativos.
- Los colores de éxito se utilizan para mensajes de estado de éxito, como los mensajes que se muestran cuando un proceso de widget tiene éxito.
- Los colores de advertencia se utilizan para mensajes de advertencia.
- Los colores de error se utilizan para mensajes de error, como los mensajes que se muestran cuando falla el proceso de un widget.
Puede utilizar el componente selector de color para definir un color base para cada uno de los seis colores de marca y función.
Para que las aplicaciones sean más dinámicas, Experience Builder utiliza diferentes tonos de cada color en toda la aplicación. Junto a cada color de marca y función, una vista previa muestra cómo aparece el texto en tres tonos: un tono claro, un tono principal y un tono oscuro. El color del texto se elige automáticamente para obtener un contraste y una visualización óptimos.
Por ejemplo, los botones utilizan los tres tonos de color para comunicar estados e interacción. En el siguiente diagrama, el botón utiliza el color principal del tema. El color predeterminado del botón es el tono principal, el color del estado al pasar el cursor es el tono oscuro y el color del estado pulsado es el tono claro.
Nota:
El color del estado pulsado de algunos botones puede parecer diferente del tono claro, ya que algunos botones tienen un efecto de animación ondulado cuando se pulsan. La animación incluye transparencia, lo que hace que el color del botón parezca más claro.
Los mensajes de información, éxito, advertencia y error también utilizan los tres tonos de color.
Si cambia alguno de los colores predeterminados de la marca o de la función, puede marcar la casilla Optimizar mis elecciones de color para generar automáticamente tonos de los colores elegidos que sean óptimos para el contraste y la visualización.
Colores neutros
Los colores neutros definen los colores básicos de su aplicación. En concreto, los colores neutros definen el color predeterminado del texto, los fondos, los bordes y las líneas divisorias.
En Neutro, puede utilizar el selector de colores para seleccionar un color neutro base. A partir de este color base, aparecen 13 tonos. Estos son todos los colores neutros que se utilizan en la aplicación.
Juntos, los colores de marca, los colores de función y los colores neutros son los colores del tema que aparecen en el componente selector de colores en la configuración de los widgets, la configuración de las páginas y la configuración de otros elementos en los que se puede definir un color.
Colores de superficie y elementos interactivos
Puede utilizar la configuración de color en Superficie para definir los colores de los fondos de los elementos y el texto que aparece en ellos. De forma predeterminada, estos colores están vinculados a los colores neutros.
- Los colores de página se aplican a las páginas, secciones y etapas principales de los grupos de pantallas.
- Los colores de contenedor se aplican a los widgets de tarjeta, los elementos de lista en los widgets de lista y las celdas en los widgets de tabla.
- Los colores de superposición se aplican a ventanas, información sobre herramientas, modales y ventanas emergentes.
Puede utilizar la configuración de color en Elementos interactivos para definir los colores de elementos como botones de menú desplegable, botones de paginación, pestañas activas en menús y botones de alternancia.
- El color predeterminado se aplica al estado predeterminado de los botones interactivos. De forma predeterminada, este color está vinculado a los colores neutros.
- El estado seleccionado se aplica al estado seleccionado de los botones interactivos. De forma predeterminada, este color está vinculado al color principal del tema.
- El color de Enfoque del teclado se aplica al indicador que muestra qué elemento interactivo de la página de la aplicación tiene el enfoque del teclado. Esto resulta útil cuando se navega por la aplicación con el teclado. De forma predeterminada, este color está vinculado al color principal del tema.
Nota:
De forma predeterminada, todos los colores de superficie y de elementos interactivos están vinculados a los colores neutros o al color principal del tema. Al cambiar el color neutro o el color principal del tema, también cambian los colores vinculados. Si cambia alguno de los colores de superficie o de elementos interactivos con sus selectores de color asociados, los colores se desvinculan del color neutro o del color principal del tema, pero puede hacer clic en Restablecer para volver a vincularlos.
Cuando cambia cualquiera de los colores de superficie o de los colores de los elementos interactivos, los colores de texto asociados cambian automáticamente a colores con suficiente contraste. La relación de contraste mínima es de 3:1. Si cambia un color de texto a un color que no cumple el estándar de contraste, aparecerá una advertencia que le solicitará que elija un color diferente.
Configuración tipográfica
En la pestaña Tipografía, puede cambiar los siguientes ajustes relacionados con el texto:
- Fuente: elija las fuentes para los encabezados y el cuerpo del texto.
- Encabezados: elija una fuente para el texto de los encabezados.
- Cuerpo: elija una fuente para el cuerpo del texto. El cuerpo del texto incluye todo el resto del texto de la aplicación, incluidas las etiquetas.
- Tamaño de fuente: utilice la escala deslizante para definir el tamaño general de la fuente. Los tamaños van desde Muy pequeño a Muy grande. Los tamaños de fuente más pequeños permiten que quepa más contenido de texto en un área, mientras que los tamaños de fuente más grandes facilitan la lectura.
Experience Builder incluye fuentes predeterminadas. Puede agregar fuentes haciendo clic en Agregar fuentes de Google en los menús desplegables de fuentes. Aparecerá la ventana Agregar fuentes de Google, donde podrá introducir una URL de fuente en el cuadro de texto. Haga clic en Aceptar para agregar la fuente.
Más ajustes de tema
Puede cambiar los siguientes ajustes en la pestaña Más:
- Radio del borde: elija un estilo general para el radio del borde de los elementos de la aplicación. El radio del borde afecta a la forma de las esquinas de elementos como contenedores, botones y cuadros de entrada. Puede elegir que el radio del borde lo defina el tema seleccionado, o elegir Ninguno, Pequeño, Mediano, Grande o Extragrande.
- Componentes: personalice el aspecto de los campos de entrada y el texto de los vínculos.
- Campo de entrada: elija un color para los campos de entrada. Los campos de entrada incluyen cuadros de entrada de texto, cuadros de búsqueda y los estados predeterminados de casillas de verificación, botones de opción e interruptores de alternancia.
- Vínculo: elija un estilo y color de subrayado para el texto del vínculo. Para el estilo de subrayado, puede elegir que el estilo lo defina el tema seleccionado o elegir Sin subrayado, Subrayado continuo o Subrayado punteado.