How to Implement Dark Mode?

Dark mode on everything – a buzzword you must have heard of in recent years. The trend to implement a secondary dark theme (started around 2019) has been so popular most of the sites and/or apps you use have a dark mode switch somewhere. Android and iOS each have their own dark mode themes.

Recent studies show that nearly 82% of users use dark mode specifically on their phones, while almost 83% of users use dark mode on their desktop operating systems. So, what’s the catch? What is a dark mode feature, why is it so popular, and how do you implement it on your site? Read more to find out.

Themes and Styles

At first, dark mode was the “default” theme on old PC’s. This wasn’t a design decision but a technology limitation because of the old CRT monitors used. They couldn’t light up the whole screen at once. With the introduction of LCD panels, the main UI theme was the default light theme.

Light theme is also called a text-based UI because it simulates the look of a handwritten text on a piece of paper (the content is black, while the background is light). Dark mode is the polar opposite of that (light content on a dark background). In technical terms, it is a secondary color theme that you offer to the user. You need to ensure the user can switch these two themes on the fly.

As mentioned above, the dark theme variant nowadays is more popular than the default light theme.

Some of the benefits it brings are:

• Device battery savings
• Reduced eye strain
• Aesthetic appeal
• More focus on the task at hand while using it (coding editors)

Generally, the dark mode setup is done mainly through site/app styling. You’ll show the user where you define all the alternate dark mode colors. Meanwhile, the JS logic switches the currently selected theme based on a button click state. If you’re on WordPress and don’t want to do it custom, you can also implement a dark theme to your website using a plugin. A good one to start with is WP Dark Mode.

Dark Mode Colors (low or high contrast)

When talking about contrast, the first thing to cover is contrast polarity.

The word contrast polarity refers to the contrast between the text and the background:

• Positive contrast polarity (light mode) refers to text with a dark typeface on a light background
• The combination of light (e.g., white) writing on a dark (e.g., black) background is referred to as negative contrast polarity (dark mode)

Dark mode emits less light than light mode. The amount of display light affects the device’s power usage and human perception of the content shown. The human pupil is sensitive to the amount of light. More light equals more eye strain, and vice versa for less light.

Contrast polarity is just a definition of the colors on the opposite sides of the spectrum. Both light and dark themes can vary in contrast, and there is no contrast standard for any of them. They can be developed in high or low contrast ratios as long as you are within the WCAG color ratios.

You can have a dark theme with fully highly contrasting colors (black background and fully white content) or a low contrast one (some shade of grey and a lighter grey, almost white content). Both are viable, but generally, the low-contrast ones are preferred because they further reduce the user’s eye strain while reading.

We’ve prepared a dark mode switch example on this link; see the difference for yourself!

Also, if you’re interested in some more design terminologies, see this article.

Dark Mode Images

Besides the theme color switch and ensuring the theme contrast is low enough to feel comfortable to use, you need to take care of the media files and think about how they’ll look on a dark mode theme.

Logo image files

The main thing you should avoid is having an image background. For example, you have an image with a white background that’s basically hidden on a light theme. When you switch to a dark theme, the user will see that background, which will show a harsh transition between the theme background and the image. The site just won’t look good compared to the light theme variant + you’ll mess up the contrast ratios.

The best way to avoid this is to use a transparent background (e.g., PNG or SVG files for your logo images). The image will “adapt” to the new background color.

Another thing you can do when talking about logo files (besides the mentioned transparent background) is to ensure the contrast with the theme background is okay. Let’s say you have a dark grey SVG logo on your default light theme. You should fill out the SVG paths with a lighter shade of grey for your dark theme variant so you don’t end up closely matching the image filled with the background color, which will result in almost hiding the logo.

JPEG images and backgrounds

In the case of JPEG files, you can’t really make the background transparent. You can solve this issue in a couple of ways:

• Prepare a separate dark mode image version and load it up when you load up the whole dark theme
• Apply a global image grayscale filter (don’t do it too harshly, a small grayscale value goes a long way) to lower the contrast difference

We’ve used an SVG for our company logo image in our example. The SVG has a transparent background, so the background issue is covered. We’ve also switched the fill color for the dark theme so we can ensure the contrast ratio between the background is high enough.

Switch Between Light and Dark Mode

The end user must have the ability to change the theme on the fly (e.g., change between the default light to dark theme and vice versa). Design-wise, the switch is usually presented as a toggle of sorts.

The switch example is also visible on our dummy project.

CSS for the Dark Mode

You prepare your theme colors in CSS using the CSS variables. In the root CSS selector, you define your light theme colors. We’ve defined the alternate colors for the dark theme inside the [data-theme=”dark”] selector, which will trigger when the JS detects the data-selector value change to dark.

All of the color variables share the same naming for their alternate versions. The last thing to do is to use up these color variables on all your selectors bound to the specific HTML element style. This way, the element color will look at the variable hex value; we switch the variable value depending on the current site theme, and the result is a seamless transition to a secondary theme.

/* Main light theme */
:root {
	--primary-color: #ff4732;
	--secondary-color: #536390;
	--font-color: #000;
	--bg-color: #f7f4f2;
	--heading-color: #292922;
	--logo-color: #ff4732;
}
/* Dark theme */
[data-theme="dark"] {
	--primary-color: #ff4732;
	--secondary-color: #f2af29;
	--font-color: #818cab;
	--bg-color: #010c50;
	--heading-color: #f7f4f2;
	--logo-color: #f7f4f2;
}

Switch Functionality with JavaScript

For our example, the JS switch code is simple.

const toggleSwitch = document.querySelector(
	'.theme-switch input[type="checkbox"]'
);
const currentTheme = localStorage.getItem("theme");

function switchTheme(e) {
	if (e.target.checked) {
		document.documentElement.setAttribute("data-theme", "dark");
		localStorage.setItem("theme", "dark");
	} else {
		document.documentElement.setAttribute("data-theme", "light");
		localStorage.setItem("theme", "light");
	}
}

toggleSwitch.addEventListener("change", switchTheme, false);

We listen to a switch change event (based on a checkbox) and then trigger a theme change function. If the checkbox is checked, we set the data-theme attribute value to dark (this will instantly switch the theme colors), and we also set the dark value into local storage so the same theme will be loaded up when the user switches the site page.

Alternatively, if the checkbox is unchecked, we switch back to the light theme and change the local storage value as well.

Force Dark

Android and iOS have their own dark mode settings, changing the UI to a dark mode theme. This works as intended, and it’s working really well nowadays, all while respecting the design rules.

Windows and MacOS also have user-editable dark mode themes in which the user can also change the accent color.

The OS-based dark mode change will only affect menu component colors. The default built-in app is the settings menu. Some third-party apps adapt to the OS theme mode and switch to dark mode, but most of them are still in the light mode after the change. Third-party apps need to develop their own dark mode settings so the user can also change those.

For example, you can force dark mode on Google Chrome. This feature is located in Chrome’s flag category.  To turn on the feature, follow these steps and try it out for yourself:

1. Navigate to Chrome’s flag page and scroll down to the dark mode toggle: chrome://flags/#enable-force-dark
2. Click on the drop-down menu next to Force Dark Mode and select Enabled
3. At the bottom, hit the Relaunch button to restart your browser

Be aware this is a flagged feature. This means the feature is not fully correct and compatible with all of the cases. Some sites are not adapted well for this global theme override, and the user will see some contrast/styling bugs.

Conclusion

Should we all jump on the dark theme train and remove the light mode completely? While the usage of dark mode themes has surely been increasing rapidly across a wide range of devices and apps that are supporting it now, light mode still has its own usage areas.

A big part of consumers is switching to dark mode for a variety of reasons. Some users like it because it looks cooler, and it’s on the trend to use it. Others use it for its eye health benefits. UI designers also like it for its more aesthetic appeal.

True, it’s a cool trend that will surely keep going on. It looks clean, and it is a design/marketing trend to promote it and switch to it, but keep in mind the main rule for its usage: “function over form” and make sure the theme switch is usable to the end user (watch out for the content and image contrast ratios).

So, to conclude, keep in mind the basic usability rules and “Welcome to the Dark Side”!