#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!

Improve your work environment with FiraCode

As a developer, you give a lot of attention to your workflow. In this article, we’re going to discuss a really subtle workflow tool that can be a game changer.

TL;DR: Go to FiraCode repository, download, install and apply to your IDE. Follow the installation instructions here.

Your IDE’s font matters, A LOT

Right now, you might be looking with a lot of skepticism to this whole article telling yourself why font matters. It’s just an aesthetic choice and so on. But here’s a simple example :

Monospace fonts compared to Fira Code

I took two fairly known monospace fonts; Courier New which is the default monospace font on Windows (usually, don’t take my word for it) and Consolas which is the default PowerShell in my Windows 10. As you might already see, Courier New is the worst when we want to differentiate 1 from l and 0 from O.

This is just an example, but what I’m trying to explain is that we should not waste our time trying to figure out if the symbol we’ve written is easily intelligible from another. We are supposed to read and understand code as fast as possible to work comfortably.

FiraCode improves your work environment with ligatures

FiraCode is not just an elegant typeface, it uses ligatures (a very simple typeface concept) to make the developer’s life way easier. Below an example of simple code with the three precedent fonts :

Monospace fonts compared to FiraCode in VSCode

As you can notice, FiraCode with ligatures makes this JS snippet much more legible! Of course, you’ll have to try it in your IDE and see for yourself.

You can learn more about Fira code over here :

And you can check the supported IDEs you can apply it to with the install instructions here.

Finally, please don’t forget to support the developer on Patreon for his amazing work.

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.