Ha llegado la compatibilidad con el Modo Oscuro en macOS.

El Modo Oscuro es impresionante y crea una experiencia de usuario emocionante. Por eso, a partir de 4D v19, 4D soporta ahora el Modo Oscuro, que se activa automáticamente si el Modo Oscuro está activado a nivel de macOS.

Esto es sólo el comienzo, y hay más por venir en futuras versiones como el soporte del Modo Oscuro para todos los componentes (por ejemplo, el widget 4D Write Pro) y el Modo Diseño.

¿Quieres ver cómo el Modo Oscuro transforma el aspecto de los elementos de 4D? Siga leyendo.

Los formularios se adaptan automáticamente

Si la fuente, el borde y el color de fondo de sus objetos de formulario ya están configurados en «automático», no necesita cambiar nada, sus formularios se adaptarán automáticamente para coincidir con el tema del sistema operativo.

También hemos actualizado los objetos de la biblioteca para que soporten el modo claro y oscuro, excepto los objetos «Área de texto enriquecido» y «Interfaz 4D Write Pro» que se adaptarán en una futura versión.

CSS para la apariencia clara y oscura

Si ha definido colores personalizados para seguir la carta gráfica de una empresa, puede definir un estilo CSS tanto para el modo claro como para el oscuro. De este modo, su aplicación se adaptará completamente a la configuración del sistema operativo.

Sólo tienes que enmarcar las clases CSS con una consulta de medios establecida en el valor claro, y hacer lo mismo con el valor oscuro.

El ejemplo siguiente establece texto negro sobre fondo blanco para el modo claro, y texto blanco sobre fondo negro para el modo oscuro.

@media (prefers-color-scheme: light) {
 .textTheme {
    fill: MidnightBlue;
    stroke: black;
  }
}

@media (prefers-color-scheme: dark) {
  .textTheme {
    fill: MidnightBlue;
    stroke: LightGrey;
  }
}

Si no está familiarizado con CSS en 4D, le aconsejamos que lea esta entrada del blog o vea este vídeo de 30 minutos del 4D Summit.

Imágenes e iconos

Es posible que necesite crear nuevas imágenes para la apariencia oscura de su aplicación. Estas nuevas imágenes tienen el mismo nombre que las de la versión clara, seguido de «_dark», y se colocan junto a ellas:

No es necesario modificar nada en 4D. Se cargará la imagen adecuada en función del aspecto del formulario.

MODO PARCIAL DE OSCURIDAD y más

Si no está preparado, tiene dudas, o quiere forzar un tema para un componente, puede elegir no aplicar los cambios a toda la aplicación, y aplicarlos sólo a un formulario. También puede hacer que el tema siga el tema de la base de datos anfitriona o las preferencias de su sistema operativo.

Nivel de aplicación

Puede establecer el valor de la combinación de colores en el diálogo de configuración o mediante código con el nuevo SET APPLICATION COLOR SCHEME comando. Los valores posibles son:

• oscuro
• claro
• heredado

El valor heredado significa lo siguiente

• si está en un componente, sigue el color de la base de datos del host
• si está en una base de datos anfitriona, sigue el color del sistema operativo

Nivel de formulario

En su aplicación, algunos diálogos no están preparados para una apariencia oscura. Color Scheme es una nueva propiedad de formulario que le permite forzar que un formulario adopte una apariencia clara u oscura.

¿Qué es lo siguiente?

Has hecho un largo viaje hacia la oscuridad. Si tienes alguna pregunta o comentario, ¡únete a la discusión en el Foro 4D!