Dark mode has been in latest design trend on websites, apps and operating systems. Just couple weeks back Facebook launched, before that your Mac OS, IOS, Windows and everyone else is on the band wagon.
Even though it’s a design trend, more and more people are starting to use it. I first saw this trend taking over back in 2012, while I was working at W3Layouts (then AgileITS) my fellow developers were coding in with the dark theme. I went crazy! Over time I also have adopted dark mode.
As I started digging deeper, I found the main reason for my switch is science. Yes, you read me correct its simple science.
Human pupils are sensitive to light. Same as our light sensors on our mobile devices. They increase and decrease screen brightness based on the light in the environment. Our pupils also contract and dilate based on light.
When the pupils are contracted you can see things clearer. As we age, the contracted pupils have less diameter to allow light inside, which affects our ability to read the text.
As a savior in dark armor and as a sign of growing old, dark mode comes to rescue. It is time to make our websites dark mode compatible and help users access information better.
Dark mode with CSS media query
CSS comes with many amazing features to style our website. One such feature is prefers-color-scheme. it is used to detect user’s system preferences and style the website based on that.
@media (prefers-color-scheme: dark) {
/* CSS related to dark mode goes here */
}This works same as responsive media queries. At first you will be writing your CSS styles as usual and overwrite the selector when the condition matches.
body {
background-color: white;
color: black;
}
/* Detecting dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}In the above code, we have some CSS styling for body, background color as white and text color as black. When the dark mode preferences are detected we are switching the styles, background color as black and text color as white.
This seems straight forward when it comes to monochromatic color. But when it comes brand colors, You have to design your brand accent into it.
Here is another example. In this example, we will have a card with heading and paragraph changing colors as we change our system preferences.
If you notice closely, we have two headings and we are hidding them based on the mode.
<div class="card">
<h1 class="visible dark">Dark Mode</h1>
<h1 class="visible light">Light Mode</h1>
<p>Take a look at our article on implementing dark mode with css and why you should add it to improve accessability for your users.</p>
<a href="/articles/adding-darkmode-to-website/">Learn more »</a>
</div>Add we have our CSS, here am using CSS variables for handling colors.
/* Default color variables */
:root {
--bg: #eee;
--text-color: rgba(0,0,0,0.9);
--card-bg: #fff;
--primary-color: blue;
}
/* Some styling for the layout */
body {
background-color: var(--bg);
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
a {
color: var(--primary-color);
text-decoration: none;
}
.card {
margin: 40px 40px;
padding: 40px;
line-height: 1.5;
border-radius: 9px;
background: var(--card-bg);
text-align: center;
max-width: 54ch;
}
.card h1 {
margin-top: 0;
}
.visible {
color: var(--primary-color);
}
.light { display: block; }
.dark { display: none; }
/* Styling for Dark mode */
@media (prefers-color-scheme: dark) {
:root {
--bg: #111;
--text-color: rgba(255,255,255,0.77);
--card-bg: #222;
--primary-color: pink;
}
.light { display: none; }
.dark { display: block; }
}Now try switching your appearance settings from light to dark mode vice versa.
See the Pen Dark mode example for W3Layouts article by Hidayath (@w3hidayath) on CodePen.
On MacOS, you click on Apple icon > System Preferences > General > Appearance
for Windows 10, goto Settings > Personalization > Colors tab > Choose your default app mode. Heare you can switch between dark and light mode.
Conclusion
So far, we have learned why dark mode is useful and how to implement using prefers-color-scheme media query. I hope you liked this article, can’t wait to see what you build.