La prise en charge du mode sombre sur macOS est arrivée.

Le Dark Mode est génial et crée une expérience utilisateur passionnante. C’est pourquoi, à partir de 4D v19, 4D prend en charge le Dark Mode, qui s’active automatiquement si le Dark Mode est activé au niveau de macOS.

Ce n’est qu’un début, et d’autres nouveautés sont à venir dans les prochaines versions, comme la prise en charge du Dark Mode pour tous les composants (par exemple, le widget 4D Write Pro) et le Design Mode.

Vous voulez voir comment le mode sombre transforme l’apparence des éléments 4D ? Continuez à lire !

Les formulaires s’adaptent automatiquement

Si la police, la bordure et la couleur d’arrière-plan de vos objets de formulaire sont déjà réglées sur « automatique », vous n’avez rien à changer, vos formulaires s’adapteront automatiquement au thème du système d’exploitation.

Nous avons également mis à jour les objets de la bibliothèque pour qu’ils prennent en charge les modes clair et foncé, à l’exception des objets « Rich text area » et « 4D Write Pro Interface » qui seront adaptés dans une prochaine version.

CSS pour les apparences claires et sombres

Si vous avez défini des couleurs personnalisées pour suivre la charte graphique d’une entreprise, vous pouvez définir un style CSS pour les modes Clair et Foncé. De cette façon, votre application s’adaptera complètement aux paramètres de l’OS.

Il suffit d’encadrer les classes CSS avec une requête média définie sur la valeur claire, et de faire de même avec la valeur sombre.

L’exemple ci-dessous définit un texte noir sur un fond blanc pour le mode clair, et un texte blanc sur un fond noir pour le mode foncé.

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

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

Si vous n’êtes pas familier avec les CSS dans 4D, nous vous conseillons de lire cet article de blog ou de regarder cette vidéo de 30 minutes du 4D Summit.

Images ET icônes

Vous devrez peut-être créer de nouvelles images pour l’aspect sombre de votre application. Ces nouvelles images portent le même nom que celles de la version claire, suivi de « _dark », et sont placées à côté d’elles :

Vous n’avez pas besoin de modifier quoi que ce soit dans 4D. La bonne image sera chargée en fonction de l’apparence du formulaire.

MODE D’OBSCURITÉ PARTIELLE et plus encore

Si vous n’êtes pas prêt, si vous avez des doutes ou si vous voulez forcer le thème d’un composant, vous pouvez choisir de ne pas appliquer les modifications à l’ensemble de l’application et de les appliquer à un formulaire uniquement. Vous pouvez également faire en sorte que votre thème suive celui de la base de données hôte ou les préférences de votre système d’exploitation.

Au niveau de l’application

Vous pouvez définir la valeur du schéma de couleurs dans la boîte de dialogue des paramètres ou via le code avec la nouvelle commande SET APPLICATION COLOR SCHEME dans le code. Les valeurs possibles sont :

• sombre
• clair
• hérité

La valeur héritée signifie ce qui suit :

• si vous êtes dans un composant, suivez la couleur de la base hôte
• Si vous êtes dans une base hôte, suivez la couleur du système d’exploitation.

Niveau du formulaire

Dans votre application, certaines boîtes de dialogue ne sont pas prêtes pour une apparence sombre. Le schéma de couleurs est une nouvelle propriété de formulaire qui vous permet de forcer un formulaire à adopter un aspect clair ou foncé.

Quelle est la suite ?

Vous avez entrepris un long voyage dans l’obscurité. Si vous avez des questions ou des commentaires, n’hésitez pas à participer à la discussion sur le forum 4D!