Dark mode first approach

The Dark Mode First approach is the opposite of what we always have seen. It has been common practice to always show a light mode version of an app or website first, which means users would actively have to switch to a dark mode.

The Dark Mode First approach is taking into consideration that there are more than 1 billion smartphones and devices in the world, and a large number of these devices are using OLED technology which allows the user to save power when portions of the screen is dimmed or completely turned off. It is therefore only pixels showing brightness or color that will use energy. Research shows that dark mode on OLED can save between 39% and 47% battery power if your screen brightness is at 100%. With a brightness between 30%-50% you will save between 3%-9%. Because of these abilities to save power it makes the Dark Mode First approach a good practice in sustainable web design.

Implementation

Until now, users have been forced to actively make the choice to save power on their devices by switching to a dark mode. Instead, to implement the dark mode first approach you must use the dark mode as standard, and let the user actively opt-in to use light mode. In other words, this approach turns the system around and shows the dark version first, and then the user can choose to switch to a light version.

By using this approach you will help your users save power which will make their devices last longer. Many take the easy option which means they won’t actively switch and therefore is using the standard theme. By first presenting the dark theme you haven’t taken away their preferred theme, you are just presenting them the good option first.

Key takeaways

• Always show the dark mode first on your website or mobile app.
• Give the user a chance to switch to light mode if needed.
• Dark mode can save between 39% and 47% power on devices using OLED technology.