--- title: "Cree aplicaciones móviles que admitan automáticamente el modo oscuro" date: "2020-12-28" categories: - "app-development" - "mobile-development" tags: - "app-development" - "dark-theme" - "mobile-development-tools" - "mobiletogether" description: Descubra cómo desarrollar aplicaciones móviles que se adapten automáticamente al modo oscuro utilizando Altova MobileTogether. Mejore la experiencia del usuario y optimice la duración de la batería de manera efectiva. --- Status: #blog Tags: #app-development #dark-theme #mobile-development-tools #mobiletogether Categories: [mobile-development](/blog/es/category/mobile-development.md) | [mobile-development](/blog/es/category/mobile-development.md) # Cree aplicaciones móviles que admitan automáticamente el modo oscuro Los dispositivos móviles Android y Apple ofrecen una opción de visualización llamada "Tema Oscuro", que se puede considerar como una imagen casi inversa de la pantalla normal. En el "Tema Oscuro", el blanco se muestra como negro, el negro se muestra como blanco, y la intensidad de los colores se ajusta en general. El "Tema Oscuro" reduce el consumo de energía, lo que puede prolongar la duración de la batería, y puede ser más cómodo de ver en condiciones de poca luz. Altova MobileTogether incluye funciones que permiten a los desarrolladores crear aplicaciones móviles que admiten automáticamente el modo oscuro, detectando la configuración del usuario al iniciar la aplicación. Veamos un ejemplo: ![](/blog/images/mt_darktheme_blog_1.jpg) A continuación, se muestran dos capturas de pantalla de una aplicación móvil que se ejecuta en el mismo dispositivo, una con el tema de color claro y otra con el tema de color oscuro. [![Capturas de pantalla de la misma aplicación móvil, mostrando la interfaz en el tema claro y en el tema oscuro](/blog/images/image-1-1.png)](image-1-1.png) Esta aplicación permite a los usuarios registrar la producción de energía de los paneles solares y el consumo de electricidad a partir de las lecturas del medidor, y genera gráficos para visualizar los datos y realizar un seguimiento del excedente a lo largo del tiempo. Muchos sistemas de generación solar residencial se conectan a la red eléctrica pública mediante un sistema de facturación de "saldo neto". Los paneles solares instalados en el techo suministran energía a la vivienda únicamente mientras brilla el sol. La electricidad proviene de la red por la noche o siempre que la demanda supere la producción. Cuando el sistema produce más electricidad de la que consume la vivienda, el excedente se devuelve a la red, complementando la capacidad de generación de la compañía eléctrica. Altova MobileTogether facilita el trabajo de los desarrolladores de aplicaciones móviles al.. [crear aplicaciones móviles multiplataforma](https://www.altova.com/es/mobiletogether) En el entorno de diseño MobileTogether, que combina herramientas de diseño de interfaz de usuario con funcionalidad de arrastrar y soltar, un potente lenguaje de programación visual llamado "Action Tree" para el manejo de eventos, y una programación funcional estandarizada para la selección y el procesamiento de datos. Cada componente de la aplicación es altamente personalizable, pero, por defecto, elementos como los colores del texto, los botones, las reglas, los bordes e incluso los fondos de las ventanas se configuran con los valores predeterminados del sistema para cada dispositivo. El diseñador MobileTogether incluye una ventana de ayuda de "Estilos" donde los desarrolladores pueden especificar la configuración general del proyecto, incluyendo una opción para elegir entre un tema claro u oscuro. [![Configuración de estilos y propiedades para habilitar automáticamente el modo oscuro en una aplicación móvil.](/blog/images/styles-window.png)](styles-window.png) Las opciones para la configuración del tema son: "Utilizar la configuración del sistema", "Forzar el tema claro" o "Forzar el tema oscuro". La opción predeterminada es "Utilizar la configuración del sistema", por lo que los desarrolladores pueden admitir automáticamente el tema oscuro sin necesidad de realizar ninguna configuración especial. ### Soporte automático del modo oscuro en los gráficos, incluso cuando se utilizan colores personalizados Algunos elementos pueden requerir ajustes de color personalizados, y los desarrolladores pueden especificar opciones alternativas para el tema claro y el tema oscuro. El primer paso es detectar qué configuración de usuario está activa. MobileTogether incluye variables globales que permiten a los desarrolladores detectar la configuración del dispositivo del usuario en tiempo de ejecución y programar acciones adecuadas en función de las capacidades del dispositivo. El cuadro de diálogo "Variables globales" del diseñador de MobileTogether muestra todas las variables globales y sus valores para el dispositivo de simulación seleccionado. [![Una variable global identifica el color de fondo del dispositivo del usuario durante la ejecución del programa.](/blog/images/global-variables-1.png)](global-variables-1.png) El color de fondo predeterminado para la pantalla de un teléfono Android específico se destaca arriba. Este valor cambia si el dispositivo está configurado en el modo oscuro. Un valor hexadecimal más bajo indica un tono más oscuro, mientras que un valor más alto corresponde a un tono más claro. El valor hexadecimal #808080 corresponde al tono de gris del 50%. Podemos crear una expresión XPath para verificar este valor en tiempo de ejecución, y asumir que cualquier color de fondo predeterminado más oscuro que el gris del 50% indica que el dispositivo está en modo oscuro. El evaluador XPath en la ventana de simulación del diseñador es una herramienta útil para experimentar y determinar la sintaxis exacta de la expresión: [![Una expresión XPath para devolver el código de color correspondiente al negro o al blanco, basándose en el color de fondo predeterminado del dispositivo móvil](/blog/images/xpath-expression.png)](xpath-expression.png) Esta expresión convierte la cadena hexadecimal a un número entero, lo compara con el valor correspondiente al 50% de gris, y selecciona el valor de la cadena para negro o blanco en función del resultado. Esta es una expresión útil para seleccionar automáticamente el color del texto según si se utiliza un tema claro u oscuro. Apliquémosla en una función de usuario: ![Implementar la expresión en una función definida por el usuario.](/blog/images/user-function.png) MobileTogether incluye funciones para crear fácilmente [gráficos y diagramas visualmente atractivos](https://www.altova.com/es/mobiletogether/enterprise-apps) que tienen la misma apariencia en todas las plataformas. La aplicación de ejemplo "Solar Tool" que se muestra arriba utiliza un gráfico de barras para ilustrar la generación diaria de energía solar, superpuesto a un gráfico de áreas que muestra el consumo de electricidad. Los desarrolladores eligen las opciones de configuración para estos gráficos a través de una serie de cuadros de diálogo de creación de gráficos, como el cuadro de diálogo "Cambiar apariencia" que se muestra aquí: [![Diálogo de configuración de la apariencia del gráfico para crear el mismo gráfico en todas las plataformas](/blog/images/chart-creation.png)](chart-creation.png) Muchos de estos diálogos establecen colores, como el color de fondo y el color del borde, como se muestra en este ejemplo. Sin embargo, tenemos control total para modificar estos valores predeterminados basándonos en la configuración de XPath dinámica, que se evalúa en el dispositivo del cliente en tiempo de ejecución. [![Opción de XPath dinámica para ajustar con precisión los controles de los gráficos.](/blog/images/chart-config.png)](chart-config.png) Al hacer clic en este botón, se abre un cuadro de diálogo con opciones para establecer un valor o una expresión XPath para cada elemento del gráfico. En la imagen que se muestra a continuación, hemos configurado los valores para todos los elementos que se especifican como negros o blancos en los cuadros de diálogo de configuración del gráfico. Hemos establecido que los elementos originalmente blancos tengan el color de fondo predeterminado, y hemos configurado que los elementos negros, como el texto y los bordes, utilicen nuestra función AutoTextColor(). ![Implementar una variable global y una función definida por el usuario para habilitar automáticamente el modo oscuro](/blog/images/dynamic-xpath.png) Configuramos otros elementos, como las líneas de la cuadrícula para cada eje, en los diálogos de configuración de creación, utilizando un tono gris claro que funciona tanto para el tema claro como para el oscuro. Existe un diálogo de configuración de XPath dinámico separado para cada capa de cada gráfico, pero una vez que se han editado todos, eso es todo. Los gráficos se crearán automáticamente correctamente, tanto para el tema claro como para el oscuro. Aquí se muestra un teléfono Android que muestra los gráficos del superávit acumulado, tanto en el tema oscuro como en el tema claro: [![Otra vista de la aplicación, tanto en el tema oscuro como en el tema claro](/blog/images/android-app-1.png)](android-app-1.png) Si está listo para crear aplicaciones móviles fáciles de usar que admitan automáticamente el modo oscuro en función de la configuración del usuario, simplemente descargue el [MobileTogether Designer](https://www.altova.com/es/mobiletogether/download), que es de uso gratuito. Y no olvide visitar la página de [Demostraciones de MobileTogether](https://www.altova.com/es/mobiletogether/demos), donde encontrará enlaces a videos, tutoriales y más aplicaciones de demostración.