Dark Mode support on macOS has arrived.

Dark Mode is awesome and creates an exciting user experience. That’s why, starting with 4D v19, 4D now supports Dark Mode, which activates automatically if Dark Mode is turned on at the macOS level.

This is just the beginning, and there is more to come in future versions such as Dark Mode support for all components (e.g. the 4D Write Pro widget) and Design Mode.

Want to see how Dark Mode transforms the look of 4D elements? Keep reading!

Forms adapt automatically

If the font, border, and background color of your form objects are already set to “automatic”, you don’t need to change anything, your forms will automatically adapt to match the OS theme.

We’ve also updated the library objects to support Light and Dark Mode, except for the “Rich text area” and “4D Write Pro Interface” objects which will be adapted in a future version.

CSS for light and dark appearances

If you have defined custom colors to follow a company’s graphic charter, you can define a CSS style for both Light and Dark Mode. This way, your application will adapt completely to the OS settings.

Just frame the CSS classes with a media query set to the light value, and do the same with the dark value.

The example below sets black text on a white background for Light Mode, and white text on a black background for Dark Mode.

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

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

If you’re not familiar with CSS in 4D, we advise you to read this blog post or watch this 30-minute 4D Summit video.

Images AND icons

You might need to create new images for the dark appearance of your application. These new images have the same name as the light version ones, followed by “_dark”, and are placed next to them:

You don’t need to modify anything in 4D. The right image will be loaded depending on the appearance of the form.

PARTIAL DARK MODE and more

If you are not ready, have doubts, or want to force a theme for a component, you can choose not to apply the changes to the whole application, and apply them to a form only. You can also have your theme follow the theme of the host database or your OS preferences.

Application-level

You can set the color scheme value in the settings dialog or via code with the new SET APPLICATION COLOR SCHEME command. The possible values are:

• dark
• light
• inherited

 

The inherited value means the following:

• if you are in a component, follow the color of the host database
• if you are in a host base, follow the color of the OS

 

 

Form level

In your application, some dialogs are not ready for a dark appearance. Color Scheme is a new form property that allows you to force a form to adopt a light or dark appearance.

What’s next?

You’ve taken a long journey into darkness. If you have any questions or comments, please join the discussion on the 4D Forum!