#TIL How to support dark mode in pure CSS

Today I’ve learned how to support dark mode in your website with pure CSS. All this while enabling only it if the client prefers dark mode.

As you might know, dark mode has become the new trend of 2019. Actually, it was the trend around the 2004-2006 when I started fiddling with websites if I recall correctly. But that’s not problem, we love dark mode on everything!

All modern operating systems like Windows 10, Android 10, Mac OS X (and iOS) have a build-in dark mode*. You can enable it in your settings and voilĂ , all your apps, are now in dark mode. But as soon as you navigate in a website you’ll be like…

*Note: Ubuntu and more generally Linux supports all kinds of themes including dark themes, but I can’t find resources about this CSS feature on Linux-based systems, if you have any information about this, please let me know.

Brace yourselves! You can quickly adapt your website to support dynamically the user preference for dark mode. With a simple CSS media query (and some CSS tweaking of course) :

@media (prefers-color-scheme: dark) {
 // Your CSS rules are here

If you’re browsing Beldy with a device that supports dark mode, you might have noticed that the website is in dark mode now!

Browser compatibility chart

Other resources

Below are more sources about the subject:

#TIL How to synchronize the time axis of Highcharts with the client’s timezone

In the context of front-end development, you’ve probably dealt with Highcharts. This tool is very powerful, but sometimes you have to read the long pages of detailed documentation to get the result you want. That’s if you know what you’re looking for in the first place.

That was my case few days ago. My problem even though Highcharts was plotting my data correctly, the tooltip above the data points reflected the time in the client’s time zone while the time axis was in UTC.

After some research, it turns out that Highcharts can be configured to be in UTC mode or local mode as documented here.

To put it simply, you need to do the following:

    utUTC: false

Another important point, your points in the time axis must be in ISO format or as a Momentjs or Date object. If the format of your dates is a bit special, you can define the parseDate method shown in this example.

Be sure to let me know if I made a mistake in the article or if you have any suggestion, correction or question!

#TIL How to correct sorting on ngx-datatable

If you’re currently working with Angular 4, chances are you’re using ngx-datatable somewhere in your app.

It is also very likely that automatic sorting will not work. To remedy it I looked a little on my side and I came across these two resources:

Basically, you’ll need to add the following two attributes to your code:

<ngx-datatable-column [sortable]="true" [prop]="yourColumnName"></ngx-datatable-column>

Note that prop represents the prop attribute in your model object that you assign to the data table. If you haven’t defined it, ngx-datatable adapts it to the camelCase format as documented here.

Be sure to let me know if I made a mistake in the article or if you have any suggestion, correction or question!

By continuing to use the site, you agree to the use of cookies. More information

The cookie settings on this site are set to "accept cookies" to provide you with the best browsing experience possible. If you continue to use this site without changing your cookie settings or if you click "accept" below, you consent to this.