CSS Media query for a dark or light UI

Automatically translated from English

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.

 

Vanessa Talbot

• Product Owner •

Vanessa Talbot joined 4D Program team in June, 2014. As a Product Owner, she is in charge of writing the user stories then translating it to functional specifications. Her role is also to make sure that the feature implementation delivered is meeting the customer need.

Since her arrival, she has worked to define key features in 4D. She has worked on most of preemptive multi-threading new features and also on a very complex subject: the new architecture for engined application. Vanessa has a degree from Telecom Saint-Etienne. She began her career at the Criminal Research Institute as a developer for the audiovisual department. She has also worked in media and medical fields as expert in technical support, production as well as documenting new features.