When you are designing an app’s interface in dark mode, it seems everyone has an opinion. As we use to say, “there are two kinds of people …”.

Which One to choose between Light and Dark Theme ?

Written by

Last updated on the

An explanation about which theme is better between the light and dark one

The Rise of Dark Theme

The dark theme has an increasing popularity amongst users and is more and more used by Android and Apple as well as major market players such as Google, WhatsApp etc ... . The dark mode is favored for reasons such as saving battery consumption, reducing eye strain in low light, personal preference and also for its impact on visual perception and productivity.

The Human Pupil is Sensitive to the Amount of Light

For users with normal vision, research suggests that positive polar contrast (light theme) is more effective for tasks such as visual acuity and text proofreading. Light themes perform better in artificial daylight and larger text sizes, contributing to faster reading. However, it has potential long-term consequences such as myopia, associated with constant use of light themes.

Visually Impaired Users

We should also also consider visually impaired users, making the difference between those with central vision impairment and issues related to the transparency of the eye media. The dark theme is recommended for users with clouded eye media, as it emits less light and may enhance clarity.

Conclusion

The dark theme might not be ideal for people with healthy vision, but a dark theme still should be included as an optional mode for users with specific visual impairments and those who prefer it. Providing users with the choice of extreme contrast can be beneficial, especially in long-term reading applications.
Check out this link to read more.

How to Code a dark theme switcher ?

Create an HTML file and build your own dark/light theme switcher.

HTML

Create a rectangle along with a paragraph with the following code :

						
<section class="primaryDivDemo" id="primaryDivDemo">
	<div class="demoFlex">
		<p class="demoText" id="demoText">By clicking on the icon on your top-right corner, you will be able to go from a light mode to a dark mode and vice-versa</p>
		<button id="darkModeToggleDemo">
			<img id="iconThemeDemo" width="40" height="40" src="[Location of your icon]" alt="">
		</button>
	</div>
</section>

CSS

Style your elements and set the colors with the following CSS :

  1. Define the length elements of your demo section.
  2. Use flex on a div to have your elements side by side.
  3. Add some styles to your paragraph element.
  4. Define the location of your icon in the demo section using flex property 'align-self'.
						
/* 1. */
.primaryDivDemo {
	padding: 20px;
	margin-bottom: 20px;
	border: 5px solid transparent;
	border-radius: 15px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

	background:
		linear-gradient(#F1F1F1
			0 0) padding-box,
		linear-gradient(to right, #8400BD,
		#60008A) border-box;
}

/* 2. */
.demoFlex {
    display: flex;
}

/* 3. */
.demoText {
	padding: 50px;
	margin: auto;
	border-radius: 8px;
	color: black;
	font-family: 'Roboto', sans-serif;
}

/* 4. */
#darkModeToggleDemo {
	border: none;
	align-self: flex-start;
}

JavaScript

  1. Select the different elements you will need to change, whether it is the icon or the colors of elements using the id.
  2. Define the two following functions :
    • darkModeEnabled_Demo ==> Enable the dark theme by changing the icon to a moon, the colors of each element and by storing a variable in the localstorage so it keeps your theme even when reloading.
    • darkModeDisabled_Demo ==> Disable the dark theme by changing the icon to a sun, the colors of each element and by storing a variable in the localstorage so it keeps your theme even when reloading.
  3. Call your function in order to trigger the event.
						
// 1.
let darkThemeDemo = localStorage.getItem('darkItemDemo');
const darkModeToggleDemo = document.getElementById('darkModeToggleDemo');
const iconThemeDemo = document.getElementById('iconThemeDemo');
let primaryDiv = document.getElementById("primaryDivDemo");
let clickText = document.getElementById("demoText");

// 2.
// a.
const darkModeEnabled_Demo = () => {
    iconThemeDemo.src = 'yourDarkThemeSvgLocation.svg' / 'yourDarkThemeImgLocation.jpg';

    primaryDiv.style.background = `linear-gradient(#333333
                                    0 0) padding-box,
                                    linear-gradient(to right, #E0C2FF, #CC85FF) border-box`;
    darkModeToggleDemo.style.backgroundColor = "#333333";
    clickText.style.color = "#fff";

    localStorage.setItem('darkItemDemo', 'enabled');
};

// b.
const darkModeDisabled_Demo = () => {
    iconThemeDemo.src = 'yourLightThemeSvgLocation.svg' / 'yourLightThemeImgLocation.jpg';

    primaryDiv.style.background = `linear-gradient(#F1F1F1
        0 0) padding-box,
        linear-gradient(to right, #8400BD, #60008A) border-box`;
    darkModeToggleDemo.style.backgroundColor = "#F1F1F1";
    clickText.style.color = "#000";

    localStorage.setItem('darkItemDemo', 'disabled');
};

if (darkThemeDemo === 'enabled') {
    darkModeEnabled_Demo();
}

// 3.
darkModeToggleDemo.addEventListener('click', () => {
    darkThemeDemo = localStorage.getItem("darkItemDemo");
    if (darkThemeDemo !== "enabled") {
        darkModeEnabled_Demo();
    }
    else {
        darkModeDisabled_Demo();
    }
});

By clicking on the sun/moon icon on your right, you will be able to go from a light mode to a dark mode and vice-versa