Detect and style for Dark Mode in CSS

CSS

—

2021-01-22

Using very little CSS it is possible to detect wether the user has dark mode enabled or not. With this unexpectedly way you'll ease your visitors eyes.

Lately almost all devices, phones and desktops, has a way to set the system into dark mode. And a way to please your visitor is to continue with the dark mode on your site as well.

The prefers-color-scheme CSS media feature lets you detect if the user's system is set to dark mode or light mode.

By writing a media query, @media, and using prefers-color-scheme: dark you can style for dark mode.

@media (prefers-color-scheme: dark)

It can also style for a prefered color scheme of light.

@media (prefers-color-scheme: light)

Now let's try to make a background light red in light mode and dark red in dark mode with this code.

.example {
	color: #000000;
	background-color: Salmon;
}

@media (prefers-color-scheme: dark) {
	.example {
		color: #FFFFFF;
		background-color: DarkRed;
	}
}

Which should give us a result like this:

How to remove duplicates in an Array using ES 2015

Have you ever wanted to get distinct values from an array in JavaScript? This small solution will show you how you remove duplicates and get a unique array using ES 2015.

JavaScript

—

2021-01-24

The nullish coalescing operator

Learn how to fallback to a value only if the first provided value is undefined or null, using the the nullish coalescing operator.

JavaScript

—

2021-01-20

Things you can do with a simple anchor tag

The <a> tag can be used for more than just linking to other pages, you can for example start downloading a file or open an email application.

HTML

—

2021-02-13