The CSS specification is constantly evolving. The process of implementing new features in CSS is complex: simply put, let’s say the CSS Working Group decides which new elements to add to the specification. Then it is up to the browser to implement these new elements, and in what order browsers choose to implement them, which is why we are now lagging behind in supporting the new features. While this can be annoying at times, it’s a better way to go, rather than having browsers implement the full specification all at once, as we saw in the early days of the web.
The CSS Working Group is made up of members from all the major browser vendors and other technology companies such as Apple or Adobe. Apple wanted to find a way to detect its new dark mode in the browser. To do this, the Cupertino company has put forward a recommendation for specification for a new level 5 media query.
@media (prefers-color-scheme: light | dark)
{ … }
Using this media query, we can find out whether the user is currently using light or dark mode in their operating system.
There are several ways to use this new CSS query to apply different themes. We’ll explore three of them in this tutorial!
Learn how to properly use dark mode in your design with Graphist.com’s article: Web Design: The Guide to Dark Mode
“Color Preferences” function to manage dark mode
Step 1: Adding the “Color Preferences” Function
@media (prefers-color-scheme: dark) {
/* custom css */
}
Step 2: Light Text on a Dark Background
One of the most important changes is the one that overrides the background color and text color:
body {
background-color : #1c1c1e ;
color : #fefefe ;
}
WARNING: To prevent text from popping out too much, and to make it appear more subtle when in dark mode, it is recommended to avoid pure white for text. Likewise, it is wise to avoid using pure black for the background.
Step 3: Desaturate the Colors
Accent colors on a white background (for example, used for links) may appear more vibrant on a darker background, depending on what color you’re currently using. If so, change the original color to a less saturated color.
a {
color : #5fa9ee ;
}
Images also appear more clear, and according to a survey, most 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 approach modifies the core components, but not all of them! Depending on the style and theme of your site, there will be different other class/id’s which you will also need to change in your @media (Prefers-color-scheme: dark) To switch completely from light mode to dark mode.
WARNING: What we’ve just done works perfectly well on modest sized websites. However, this method would be a nightmare to manage on a large project, which has many different elements that all need to be prioritized.
There is another method, which we will talk about in detail now.
Read also: How to choose the right color contrast on your site?
Use CSS Filters to Enable Dark Mode
One of the values ​​we can use with CSS Filters is invert, In fact, it only gives you the possibility to apply this value to the HTML and invert all colors, which would give a “dark mode”.
@media (prefers-color-scheme: dark) {
html {
filter: invert(100%);
}
}
Caveat: Although the “filter” method works with the content in our document, it is still not very efficient. For example, the shadows of some elements are also reversed. We’ve lost control of styles, which becomes an even bigger problem when we have a colored background. We also have a new issue to consider when it comes to images. In fact, these are also found to be reversed, offering an involuntary return to the film and negative timing.
Read also: Accessibility: The Complete Guide to Improving Your Website
Put your site in dark mode with custom properties
The methods we’ve explored so far can cause you to lose control of styles, or else require a lot of maintenance to make sure everything is updated in dark mode.
There exists another way to look at the question: you just have to use “custom properties” to define your colors and replace them with “media query”.
To use custom properties, you need to set it inside the element at the top of your css :root,
:root {
--background-color: #ededed;
--page-background: #fff;
--text-color: #212121;
--color-alpha: #c3423f;
}
To use a custom property, 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);
Now you can add “Media Query” again, this time leaving the values ​​of “Custom Properties” in there. you would put it right after the definition of :root, and inside the media query. So you can just choose new values ​​for all dark mode colors.
@media (prefers-color-scheme: dark) {
:root {
--background-color: #111;
--page-background: #212121;
--text-color: #ededed;
--color-alpha: #50a8d8;
}
}
With this method, you retain control over the entire stylesheet. For example, images won’t be affected: you’re free to desaturate them a bit!
You can also hire a freelance web designer to switch your website to dark mode safely. Get multiple quotes fast by posting your project for free on Codeur.com!
Read also: Learn CSS: The Basics