"Prepárate para el modo oscuro". Así han de prepararse las apps para iOS 13.

Los desarrolladores del programa oficial de Apple hemos recibido un correo de Apple donde se nos recuerda que adaptemos nuestras apps al modo oscuro. Algo que, por desgracia, nos va a dejar con un panorama temporal de apps no adaptadas y otras que nunca se adaptarán o lo harán en forma incorrecta. Vamos a ver por qué.

El modo oscuro presenta un dramático nuevo aspecto al iPhone y al iPad que está perfectamente integrado en todo el sistema, tan sencillo como activarlo desde el centro de control o Siri. Con la apariencia oscura en los elementos de la interfaz de usuario, el contenido de tus apps serán el foco principal.

Cuando el modo oscuro se activa, todas las apps construidas con la SDK de iOS 13 se ejecutarán en modo oscuro. Aprende cómo optimizar las apps para el modo oscuro y luego prueba tus apps en un dispositivo que ejecute la última beta de la versión 13 de iOS o iPadOS. Si necesitas más tiempo para hacer que tus apps se vean genial en el modo oscuro, o si el modo oscuro no está hecho para tu app, puedes aprender a cómo deshabilitarlo.

Este es el contenido, en español, del email que ha enviado Apple. Y lo más interesante es la última parte. Como se comenta, toda app que esté generada con la SDK de iOS 13 (para lo cual hay que usar la última versión de la herramienta Xcode, la 11 en concreto) integrará el modo oscuro cambiando los colores por defecto del sistema por sus equivalentes para el citado modo. Siempre y cuando los usemos, claro. Si usamos colores personalizados, toca trabajar.

Cómo se ha adaptado iOS al modo oscuro

Muchos se han preguntado por qué Apple ha tardado en ofrecer este modo de apariencia en sus apps. La explicación es que no es algo trivial y ellos mismo habían realizado un trabajo que no permitía hacer esto de una forma sencilla. Hasta ahora, todos los colores del sistema se registran con sus valores puestos en RGB (los valores de 0 a 255 de rojo, verde y azul). Esto ha obligado a crear una nomenclatura clara para los colores, no por el color, identificando los elementos por él.

Así representaba Apple por defecto los colores del sistema

De esta forma un elemento que antes usaba el color blanco con los valores 255, 255, 255, ahora usa el color cuya etiqueta es systemBackground o una etiqueta que tenía el color 0, 0, 0 (el negro) ahora tiene el color identificado por la etiqueta label. Esto obviamente permite al sistema cambiar, gracias a esta etiqueta, los valores según el modo.

Ahora los colores se etiquetan por nombres, para convertirlos en dinámicos.

Así, si estamos en modo claro, aplicar el color label devolverá 0, 0, 0 y si estamos en modo oscuro devolverá el 255, 255, 255. Al estar asociado a cada elemento una etiqueta y no un valor concreto de color, podemos cambiar y personalizar los colores de una forma más simple.

También existen variaciones para la importancia del elemento con respecto al color, para importancia primaria, secundaria, terciaria... cada una de ellas con un alpha (transparencia) menor.

Así que Apple tuvo que poner orden en el sistema y crear estas etiquetas de color para cada componente de la interfaz que necesitara un color, así como definir qué color tendría por defecto para el modo de luz (modo light) y cuál para el modo oscuro (modo dark). Hay dos paletas completas con todos los colores para cada modo.

Puedes consultar todos ellos en la guía de diseño de interfaces humanas de Apple pulsando aquí.

Materiales del modo oscuro para la app Fotos

También se han tenido que adaptar los materiales, que son algo más que colores: es la mezcla de un color con algún efecto como de translucimiento o vibrancia a través del efecto translucido. Y por supuesto, los elementos de la UI se han visto modificados para que sus colores sean los correctos, por defecto, según cada modo de color elegido.

Adaptar la app al modo oscuro

Si nuestra app usa desarrollo nativo con la SDK oficial y usamos iOS 13, estamos aceptando el uso del modo oscuro nos guste o no. Y debemos tener presente que cualquier color que nosotros hayamos elegido que no sea aquellos por defecto deberá tener una adaptación.

Generar nuestra app con Xcode 11 es aceptar el modo oscuro. En caso que no queramos todavía o no queramos en ningún momento, tendremos que desactivarlo.

Si escogimos convenientemente nuestros colores porque el equipo de diseño nos dijo que debían ser esos, ahora tendremos que volver a hablar con ellos y que definan la paleta de colores para el modo oscuro, con la equivalencia. Para ello, Apple ha incorporado los colores a su catálogo de recursos, de forma que podemos crear un color con una etiqueta personalizada, y proporcionar la versión que ofrecerá para el modo claro, para el modo oscuro e incluso un modo por defecto anterior a iOS 13 para dispositivos no soportados (que puede ser diferente).

En Applesfera

Modo oscuro en iOS 13, más allá del simple cambio de color

Pero no solo eso: hay casos donde las imágenes que usemos en una app, como parte decorativa, también están pensadas para ser usadas en un modo de pantalla clara y quedarán francamente mal si se activa el modo oscuro. Por este motivo, en el catálogo de recursos también podemos ofrecer versiones de nuestras imágenes preparadas para el modo oscuro. Imágenes nuevas, completamente adaptadas para que se vean bien en este modo y que tendrán el mismo nombre que la imagen original que usaba: simplemente hemos incorporado una nueva versión.

Elegimos imágenes de forma dinámica

Al ser llamada o cargada por código o por interfaz, en caso de estar en modo oscuro el sistema, escogerá la versión específica para este modo de forma automática sin tocar una sola línea de código.

Adopción del modo oscuro

Apple ha hecho un gran trabajo que facilita enormemente la tarea a toda app que esté hecha con la SDK oficial. De forma que todas las apps nativas, en cuanto tengas las mínimas adaptaciones, tendrán el modo oscuro.

Pero, ¿qué pasará con esa enorme cantidad de apps no nativas que pueblan el App Store? Cualquier app, poniendo una llave UIUserInterfaceStyle en el fichero info.plist del proyecto (algo así como el manifiesto o configuración general de la app) podrá optar por deshabilitar el modo oscuro en su app y que la app no intente transformarse en forma alguna, aunque esté generada con la SDK de iOS 13 con Xcode 11.

Pero está claro que el resto de librerías de interfaz tendrán que hacer el trabajo necesario para unir sus implementaciones al uso de colores y temas dinámicos que ha hecho Apple, así como proporcionar sus propias maneras (si les interesa) de tener diferentes imágenes para cada modo en cada de ser necesario.

Esta, entre otras, es uno de los muchos motivos por los grandes empresas americanas como AirBnb o Dropbox, han abandonado sus desarrollos multiplataforma o que usaban tecnologías híbridas, para pasarse al nativo. Porque cada sistema (y en Android pasa algo muy parecido) está adoptando los cambios de formas diferentes y eso obliga a adaptar las librerías para soportar las nuevas funciones o directamente no darlas a los usuarios.

Debido a la diferencia inherente de implementaciones de modo oscuro entre iOS y Android, y la necesidad de actualizar librerías, muchas apps no nativas tardarán en adaptarse a modo oscuro o no lo harán nunca.

Sin duda habrá infinidad de apps que optarán por no dar modo oscuro y crearán una experiencia poco integradora. Y esto pasará tanto en iOS como en Android que inaugura también su modo oscuro en Android 10. Apps como las populares Facebook, Instagram o WhatsApp (todas de Facebook) puede que tarden bastante en adaptarse, mientras que Telegram que es nativa de hace tiempo (y hecha en Swift) estará disponible casi desde el día 0 al igual que otras como 1Password o Twitter.

Así que si sois desarrolladores y aún no os habéis puesto a probar vuestras apps en modo oscuro, ya estáis tardando para dejarlo todo afinado antes del próximo día 10 de septiembre donde Apple lanzará la versión Golden Master de iOS 13.0, que dará lugar a la apertura del App Store para enviar apps creadas con la SDK de iOS 13 y con Xcode 11. El tiempo se agota.