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.

What is a Media Query?

In CSS, media queries are useful when you want to modify your application’s look depending on specific characteristics. 4D supports the prefers-color-scheme media feature, so you can define the behavior of a dialog in light and dark mode.

DEMO TIME

Let’s take an example. In the Contacts application, here’s what the light appearance looks like on macOS:

 

Step 1

To change the design of this application, we chose:

• four colors for text and lines
• three colors for the background

 

We defined these colors in a CSS file called “styleSheets.css”. Here’s what it contains:

	.accentColor1 {
		stroke: #8594B2;
	}

	.accentColor2 {
		stroke: #DDDDDD;
	}

	.accentColor3 {
		stroke: #EEEEEE;
	}

	.accentColor4 {
		stroke: #C0C0C0;
	}

	.accentBackColor1 {
		fill: #AAAAAA;
	}

	.accentBackColor2 {
		fill: #EEEEEE;
	}

	.accentBackColor3 {
		fill: #444444;
	}

Each color has a corresponding class named “accentColorX” or accentBackColorX”.

Then, inside the property list, we assigned a CSS class to each form object:

Step 2

We turned on Dark Mode on macOS. Here’s the result:

The form objects have automatically switched to Dark Mode. However, the color of the Name label doesn’t go well with the dark background, and the light grey frame doesn’t fit in well either.

We need to change the color set. After a few tests, we finally have our four text colors and our three background colors.

Step 3

It’s time to define these colors so that:

• if the interface is in light mode, 4D uses a certain set of colors
• if the interface is in dark mode, 4D uses another set of colors

 

Media queries are useful when you need to conditionally apply styles to the forms. You can wrap the light theme CSS classes inside a media query with a value set to light, and the dark theme CSS classes inside a media query with a value set to dark:

@media (prefers-color-scheme: light){
	.accentColor1 {
		stroke: #8594B2;
	}

	.accentColor2 {
		stroke: #DDDDDD;
	}

	.accentColor3 {
		stroke: #EEEEEE;
	}

	.accentColor4 {
		stroke: #C0C0C0;
	}

	.accentBackColor1 {
		fill: #AAAAAA;
	}

	.accentBackColor2 {
		fill: #EEEEEE;
	}

	.accentBackColor3 {
		fill: #444444;
	}
}

@media (prefers-color-scheme: dark){
	.accentColor1 {
		stroke: #A1BFFC;
	}

	.accentColor2 {
		stroke: #4C4C4D;
	}

	.accentColor3 {
		stroke: #4D4D4D;
	}

	.accentColor4 {
		stroke: #46484A
	}

	.accentBackColor1 {
		fill: #7F7E7F;
	}

	.accentBackColor2 {
		fill: #444444;
	}

	.accentBackColor3 {
		fill: #CBCACB;
	}
}

And this is what we get:

 

What’s next?

If you need help with CSS in 4D, we advise you to read this blog post or watch this 30 minutes 4D Summit video.

And as always, you can join the discussion on the 4D forum.