Introducción

Seguramente has oído hablar del Modo Oscuro o Dark Mode de las aplicaciones, es decir, un modo en el que la gama de colores de la interfaz de usuario se oscurece. Esto permite, entre otras cosas, mejorar la visibilidad en lugares con poca luz y reducir el consumo energético de las aplicaciones (los colores oscuros utilizan menos energía que los claros).

Si bien algunas aplicaciones ya incluían un Modo Oscuro en su interfaz, no fue hasta la publicaciíon de iOS 13 e iPadOS, que se incluyó el Modo Oscuro en la configuración del propio dispositivo.
Para cambiar a Modo Oscuro tenemos que ir a Ajustes > Pantalla y brillo y seleccionar Modo oscuro.

Adaptar las aplicaciones al Modo Oscuro

Para poder adaptar una aplicación al Modo Oscuro deberemos trabajar con Xcode 11 y iOS 13. Además, deberemos modificar los colores e imágenes que se usen en la aplicación.

Usar colores adaptativos

Se deben utilizar colores que se adapten de forma automática al estilo de la interfaz. Para ello tenemos dos posibilidades:
Utilizar colores semáticos. Se trata de un conjunto de colores preparados por Apple, que presentan dos variantes: la del Modo oscuro y la del Modo claro.

Para usar estos colores, por ejemplo, desde el código, basta con escribir:

[swift]

let color = UIColor.systemGreen

[/swift]

O si estamos en el Interface Builder, seleccionarlo en el atributo color del componente que queramos darle color.

Definir colores personalizados

Tal como vimos en Como crear una paleta de colores (Color Assets) en Xcode, podemos definir nuestra propia paleta de colores en Xcode, de forma que podamos llamar desde cualquier punto de la aplicación a estos colores (tanto desde el código como desde el Interface Builder).

Para ello, seleccionamos la carpeta Assets.xcassets (o creando una carpeta .xcassets propia para los colores) en el navegador del proyecto (Proyect Navigator).

Después hacemos clic con el botón derecho, seleccionamos New Color Set y cambiamos sus atributos para generar el nuevo color.

Dos versiones del mismo color

Pero ahora debemos generar dos versiones del mismo color: la versión del modo claro o por defecto y la del modo oscuro.

Para ello desde el Inspector de atributos del color que hemos creado, seleccionamos el atributo Apperances, y en el la opción Any, Dark.

Al hacer esto nos aparece el color pero con dos versiones: Any Appearance y Dark Appearance. Desde el inspector de propiedades indicamos el color para cada una de ellas.

De esta forma, cuando se cambie el modo del dispositivo, nuestra aplicación tomará automáticamente el color que le corresponda.

Para poder cambiar de modo en el simulador, una vez lanzada la aplicación sobre este, seleccionamos en la barra inferior de Xcode el ícono que representa dos switches, y luego indicamos el estilo de interfaz que queremos que se aplique.

Categorías: SwiftUIColor

0 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Sígueme en Feedly