CSS Media query for a dark or light UI

Dark mode has been gaining a lot of ground recently. That’s why we’ve added support for it in 4D v19, and mentioned a few ways you can adjust it to your needs in the related announcement.

In this blog post, we’ll focus on CSS and explain in detail how to set CSS styles for light and dark modes using CSS media queries.


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!


4D View Pro now in 6 languages!

We know how important it is for both you and your customers to have 4D View Pro spreadsheets in your native language. That’s why 4D v18 R5 now provides a set of five supported languages! In addition to English, we’ve added support for French, German, Spanish, Japanese, and Portuguese!


Type ahead made easy

If you’re interested in the user interface, you may have already used the On before keystroke and On after keystroke events. You’ll certainly be happy to know that the handling of these events has been greatly enhanced with 4D v18 R5. In addition, a new command has been created to determine if there is ongoing input when the On before keystroke event is generated. Let’s find out more!


Preview your CSS directly in the form editor!

In 4D v18 R5, you can preview the final CSS rendering in the form editor WITHOUT running your dialog. Yes, you heard that right. Standardizing and reviving your forms has never been easier!

If you haven’t yet heard about CSS in 4D, now’s the perfect time to learn more! Introduced in 4D v18 for project applications, this concept includes enhanced and quick style sheets based on CSS. I recommend taking a look at this blog post.


Select 4D Write Pro Interface pages to display

The two 4D Write Pro Interface widgets continue to be enhanced with more abilities and functionalities in each release. For some of your applications, not all the widget pages are useful. For example, you use 4D Write Pro to format your emails, so you only want to display a few pages to simplify the interface and make the user’s work easier.

4D v18 R5 lets you display only the desired pages. Keep reading to learn how!


Project by default. Binary on demand

Projects were introduced in 4D v17 R5. An architecture representing a giant evolution for 4D applications, projects opened the 4D world to source control tools, collaborative programming, code sharing, modularity, and much more! To make things even better (and simpler), 4D v18 R4 creates new projects by default, while developers – if they choose to do so – can continue to create binary databases via a simple setting.


Define the font size for automatic font

In a previous R-release, we added two new automatic themes to define font and the font size, so there are three automatic themes at your disposal which respect the guidelines of each platform. To design your interface, the automatic theme is the recommended way to go with each form object using the font and size recommended by the OS.

In some cases, you may need more control and have valid reasons to ignore the guidelines. With 4D v18 R3, you can override the size of the automatic themes and have more control over how your text is displayed.


4D Write Pro: New standard actions for tables, rows, and cells

4D v18 R3 brings new standard actions to 4D Write Pro. They target tables and their elements (i.e., rows and cells). These actions let you to define a table’s border, a cell’s background color, the vertical alignment of the text in a row, as well as the alignment of the table itself in the document … just to name a few. All standard actions are accessible either through simple buttons, dropdown lists, or menus or through a few short lines of code. Want more? The menus are automatically adapted to the user’s language! Plus, tables, buttons, lists, and menus are automatically activated or deactivated depending on the user’s current selection. This saves developers a lot of time!