Dark Mode in CSS

Dark Mode in CSS

The CSS specification is constantly evolving. The process of implementing new features in the CSS is complicated: to put it simply, let’s say a CSS task force decides what new elements to add to the specification.

It is then up to browsers to implement these new elements, and choose in which order to implement them, which is why we now have a lag in supporting new features. While this can be annoying at times, it’s a much better way to do it, rather than if browsers were implementing the full specification at once, as we saw in the early days of the web.

The CSS working group is made up of members from all major browser providers and other technology companies such as Apple and Adobe. Apple wanted to find a way to detect its new dark mode in the browser. To do this, the Cupertino firm pushed a recommendation to the specification for a new Level 5 media request.

@media (prefers-color-scheme: light | dark)
{ … }

Thanks to this query media, we can detect whether the user is currently using light or dark mode in their operating system.

There are many ways to use this new CSS query to implement different themes. We will now explore 3 in this tutorial.

The color preferences feature to handle the dark mode

Step 1: Add “Color Preferences”

@media (prefers-color-scheme: dark) {
/* custom css */}

Step 2: Light text on dark background

One of the most important changes is the one that supersedes the background color and color of the text:

body {
background-color : #1c1c1e ;
color : #fefefe ;
}

To prevent the text from coming out too much and to give it a more subtle appearance when it is in dark mode. It is recommended to avoid pure white for the text; Similarly, it is wise to avoid using pure black for the bottom.

Step 3: Unseat colors

Accent colors (used for example for links) on white background may appear brighter on a dark background (depending on the color you are currently using). If this is the case, disarm the original color in less saturated color.

a {
color : #5fa9ee ;
}

Images also tend to appear brighter and, according to one survey. The majority of people preferred desaturated images in dark mode.

img {
filter: grayscale(20%);
}

Final code

@media (prefers-color-scheme: dark) {
body {
background-color: #1c1c1e;
color: #fefefe;
}
a {
color: #5fa9ee;
}
img {
filter: grayscale(20%);
}
}

This method shifts the main components, but not all of them. Depending on the style of your site, and its theme, there will be different other class/id that you will also need to change in your to switch completely from light to dark mode.

@media (Prefers-color-scheme: dark)

What we just did works perfectly well on modest websites. However, this method would be a nightmare to manage on a larger project, with many different elements that all need to be prioritized.

There is another approach that we will detail now.

Use a CSS filter to activate dark mode

One of the values we can use is CSS filters. So we could just apply that value to HTML and reverse all colors, which would give us a “dark mode.”

invert
@media (prefers-color-scheme: dark) {
html {
filter: invert(100%);
}
}

Although the filter method works with the document content. It is not yet very effective – the shadow of some elements, for example, is also reversed. We’ve lost control of styles, which becomes an even bigger problem when you have colorful backgrounds. We also have a whole new problem to take into account when it comes to images. Indeed, these are also reversed, as if we return to the time of film and negatives.

Switch your site to the dark mode with Custom properties

The methods we’ve explored make us either lose control of styles or require a lot of maintenance to make sure everything is updated in dark mode. Another way to approach the issue is to use custom properties to define our colors and replace them with a “media query.”

To use custom properties, we define them at the top of our CSS inside the element.

:root
:root {
--background-color: #ededed;
--page-background: #fff;
--text-color: #212121;
--color-alpha: #c3423f;
}

To use a custom property, we use the syntax.

var(--custom-property-name)

body {
background-color: var(--background-color);
color: var(--text-color);
}
.content-container {
background-color: var(--page-background);
}
.text--alpha {
color: var(--color-alpha);

We can now add the “media query” again, this time bypassing the values of the “custom property” found there. We’re going to position it right after description, and within the media query, we can now easily select new values for all the colors in the dark mode.

:root
@media (prefers-color-scheme: dark) {
:root {
--background-color: #111;
--page-background: #212121;
--text-color: #ededed;
--color-alpha: #50a8d8;
}
}

With this method, we keep control of the entire style sheet. Images, for example, will not be affected (free to unsaturate them slightly).

Comments

Write a Reply or Comment

Your email address will not be published. Required fields are marked *


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.