Dark mode is a colour scheme that shows light text on a dark background. Its main benefits for a website or app are more comfortable viewing in dim light, lower battery use on OLED screens at high brightness, and a modern look, but it should be an option rather than a replacement, because most people still read better in light mode in bright conditions.
Do you feel like the screens you see today are darker and more mysterious than they used to be? Well, you can thank the growing popularity of dark mode for that. Dark mode, black mode, dark theme, night mode, or lights-out mode are just some of the names for the same trend that is sweeping the digital landscape. As a matter of fact, you can’t help but notice the recent rise in sites and apps that adopt this minimal, modern design style.
Dark mode isn’t just a trend; it’s acquired a lot of traction, especially since major companies like Apple, Facebook, and Google Chrome started giving dark mode as an option.
But why is everyone making such a big deal about this? Exactly why is everyone glued to the dark theme? And, more significantly, should you think about using it when designing or redesigning your website? You’re in the right place. In this post, we’ll investigate why dark themes exist and discuss whether or not they should be implemented in your next design.
Key takeaways
- Dark mode shows light text on a dark background and works best as an option alongside light mode.
- On OLED phones, Purdue researchers measured 39% to 47% battery savings at full brightness but only 3% to 9% at 30% to 50% brightness.
- Most people with normal vision read better in light mode in bright conditions; some people with cataracts read better in dark mode.
- Use the prefers-color-scheme media query to match the device setting, plus a toggle that remembers the choice.
- Use dark grey such as #121212 instead of pure black and keep normal text contrast at 4.5:1 or higher.
What Is Dark Mode?
You’ve probably seen it on many applications and websites, and it’s been growing in popularity rapidly. The goal of dark mode is to provide a more pleasant viewing experience, especially for those who work in dim conditions.
In dark mode, the background is dark (often black) and the text and other interface components are lighter (typically white). The purpose of switching to dark mode is to reduce glare and give your screens a more subdued appearance.
Where Did Dark Mode Come From?
Although dark themes can be traced back to the 1970s when large CRT monitors were the norm, Google is mostly responsible for giving them a contemporary spin. To provide users with a more aesthetically pleasing experience, they implemented “dark mode” options across all of its platforms and products.
But it wasn’t just Google making these strides. Microsoft created waves in 2010 with the debut of Windows Phone 7, which included dark-themed wallpapers and icons. Dark mode was accepted by Windows Phone 7, giving customers the chance to experience a more refined and fashionable interface with black backgrounds and high-contrast icons. The dark mode movement was given a boost by Microsoft’s decision.
The appeal of dark mode was too great for other tech companies to ignore for long. Apple, recognised for its design expertise, joined the trend by adding dark mode as a configurable option in iOS, macOS, and other platforms. This choice made it easy for Apple customers to customise their digital experience by choosing between a dark mode and a light option.
Facebook, X (formerly Twitter), YouTube, Reddit, and WhatsApp not wanting to be left out, also implemented dark modes. They picked up on the fact that people wanted a more aesthetically pleasing and fashionable user interface. These platforms gave customers a choice between the traditional light mode and the sleek blackness of dark mode by including dark mode alternatives.
What Are the Benefits of Dark Mode for Your Website?
Enhanced Readability: In low-light situations, dark mode cuts glare, and many people find it more comfortable to read at night. Because of the contrast between the dark backdrop and the light text, short passages and interface labels stand out clearly.
For long articles in bright conditions, though, most people with normal vision read better in light mode, according to Nielsen Norman Group’s research summary. That is why dark mode works best as a choice your readers can switch on, not the only option.
Visual Appeal: Incorporating a dark mode into your website design can improve its visual appeal and modern aesthetic. The classy black background is both sophisticated and striking. Dark mode is a modern aesthetic choice that demonstrates your understanding of user experience and commitment to offering a satisfying one.
Improved Battery Life for OLED/AMOLED Devices: Dark mode only saves power on OLED and AMOLED screens, where dark pixels use less energy, and the saving depends on brightness. Purdue University researchers found that switching from light to dark mode at 100% brightness saved an average of 39% to 47% of battery power on OLED phones, but at 30% to 50% brightness the saving was only 3% to 9%.
It is still a small win for your users, especially people who browse outdoors at full brightness or late at night.
Accessibility and User Preferences: Dark mode is designed to accommodate a wide range of user preferences and accessibility requirements. Some people with light sensitivity or cataracts find light text on a dark background easier to read. By accommodating people who prefer a darker viewing experience, you’ll attract a wider audience and show that you care about their opinions.
Brand Identity: Implementing a dark mode can set your website apart from the competition and give your brand a distinct personality. Although many websites are gradually transitioning to dark mode, light mode is still the norm.
This design decision will help your website stand out from the crowd and make a lasting impression on your audience. It has the potential to become an identifying feature of your business and help you stand out from the crowd by giving your online persona an air of refinement and exclusivity.
Enhanced Images: Black has a mysterious way of bringing out the full brilliance of other colours. A black background will make your products, whether they be food and drink or artwork, stand out and captivate your audience like never before.
Improves Focus: For some people, light content on a dark background makes the important parts of a page stand out and helps them focus. The extreme contrast helps the site’s content stand out, while the background almost disappears.
This ingenious technique makes the crucial information stand out and catch your attention. Dark mode delivers a visually relaxing experience that aids concentration by eliminating the visual noise and distractions caused by bright white backdrops.
What Are the Downsides of Dark Mode?
Compatibility with Certain Content: It’s possible that not all media works best in dark mode. Darker backgrounds may obscure fine or faint color details, which could be a problem for your website. Images or graphics may appear less vivid or dynamic when set to the dark mode.
Accessibility Considerations: While dark mode can improve reading for many users, it may not be appropriate for all. Some people may have trouble reading white writing on a black backdrop due to visual impairments or eye issues.
Legibility: While dark mode’s background-to-text contrast is striking, it does present some rare readability issues. Light text on a dark backdrop might cause eye strain and discomfort for some users, especially those with low vision.
Inconsistency across Platforms: The use of “dark mode” varies from one operating system to another. The dark mode of your website’s design and functionality may not translate well across different platforms, browsers, and devices.
This lack of uniformity can provide a splintered user experience in which viewers are confronted with different visual styles depending on the device or environment.
Branding Considerations: Dark mode may not mesh with the design aesthetic of some websites or the branding preferences of some businesses. It’s possible that dark mode isn’t the ideal fit for your company if it often employs bright or light colour palettes. Our guide to the importance of colours in branding explains why palette consistency matters.
A feeling of Suffocation: It’s not uncommon for people to report feeling stifled when entering a room with dark walls. Similarly, for a website, too much darkness can have the same oppressive effect on visitors. It’s important to know how to strike the right balance.
What Are the Dos and Don'ts of Dark UI?
Do’s of Dark UI
Prioritise Readability: Choose contrasting text colours that are lighter in tone. Maintaining readability is crucial to providing a satisfying experience for the end user.
Contrast Wisely: Use contrast effectively by drawing attention to key features and away from less-important ones. Use lighter hues for clickable items like buttons and links to draw attention to them.
Test Across Devices: If you want your dark UI design to look good and function perfectly across all devices and operating systems, you must test it thoroughly. This will ensure that everyone is using the same version of the service.
Consider Accessibility: Make sure the colour contrast is sufficient for persons with low vision by following accessibility requirements. Make sure your website meets the Web Content Accessibility Guidelines (WCAG 2.2), the current version of the standard.
Don’ts of Dark UI
Don’t Sacrifice Functionality for Aesthetics: Dark mode can be aesthetically pleasing, but it should never come at the expense of usefulness or efficiency. Make sure the user experience isn’t hampered by the site’s gloomy colour palette.
Don’t Overdo the Darkness: Avoid making your entire user interface black or very dark. To avoid the user interface looking too heavy or overwhelming, it’s important to strike a balance between darker backgrounds and lighter objects.
Don’t Ignore Consistency: Consistency is important, so try to maintain it throughout your dark UI design. The appearance and feel of your website or app as a whole should be consistent from page to page in terms of colour scheme, typeface, and overall style.
Don’t Forget User Feedback: Listen to your users and make adjustments based on their input. User feedback can help you fine-tune and develop your dark UI design to meet the unique needs of your target audience.
Tips for Designing in Dark Mode
If you’re a designer, I’m sure you’re wondering “How do I go about designing for dark mode?”. Don’t worry, here are a few tips to help you get started.
Pick a Good Colour Scheme: Use colours that look good in the dark. Choose colours that will make the text easily legible against its background. Try out various colour schemes to see what works best in terms of both visual appeal and practicality.
Avoid Using Pure Black or Pure White: Avoid using just black and white if you’re going for a dark theme. White (#FFFFFF) and black (#000000) are examples of pure colors, which lack any shades of gray. Black backgrounds with white text may seem like a good idea to novice designers, but the stark contrast between the two can be tiring on the eyes and make for a poor overall viewing experience.
It is suggested that shades of gray be used instead, with dark gray standing in for black and light gray for white. A more aesthetically acceptable dark theme can be achieved by designers using a range of grayscales.
Make Readability a Top Priority: Make the text and other key elements stand out against the dark backdrop by using lighter colours for them. If you have trouble reading the text, especially in longer paragraphs or tiny writing, try experimenting with different font styles and sizes.
Make Good Use of Contrast: Use contrast to draw the eye to specific areas and emphasise key features. Make sure that buttons, links, and other forms of interactivity stand out by using colours that are either more vibrant or more contrasted.
Pay Attention to Icons and Imagery: Choose brighter iterations or shift the colours around so they stand out against the shadows. It’s important for icons to be easily understood and recognisable.
Be wary of using very saturated colors: Light settings prioritize the readability of text, symbols, and menus. When working with a dark background, it’s trickier to adjust the colors so that they’re not excessively “neon” and hinder readability. You need to remember that any color will show out significantly more in dark mode than in regular light mode when creating an interface.
Test Across Devices: Dark mode’s visual effects can vary depending on the device and the user’s preferred wallpaper, therefore it’s important to test it in a variety of contexts. Make sure your layout is legible and looks well across a range of platforms and screen sizes by testing it in a variety of environments.
Ensure Consistency: Keep your dark mode design uniform throughout. Check that the design’s light mode counterpart retains the same color palette, typeface, and general aesthetic as your brand.
Additionally, if you’re confused about what tools to use to help you design your website. Read our blog on The Top 20 Design Tools to Kickstart your Online Journey.
How Do You Add Dark Mode to a Website?
The cleanest set-up follows the visitor’s device setting and adds a manual switch on top:
- Define colours as CSS variables. Store backgrounds, text, borders and accents as custom properties, so the whole palette can be swapped in one place.
- Match the device setting. The prefers-color-scheme media query tells you when a visitor’s operating system or browser is set to dark, so the site can match it on the first visit.
- Add a toggle and remember the choice. A clear switch, ideally with a small micro-interaction to confirm the change, lets people override the default. Save the choice so the next page loads in the right theme.
- Use dark grey, not pure black. Google’s Material Design dark theme guidance recommends #121212 as the base surface colour.
- Check contrast in both themes. WCAG contrast rules ask for at least 4.5:1 for normal text and 3:1 for large text.
- Prepare light versions of logos and icons. Dark artwork disappears on a dark background, so keep alternate files ready.
| Factor | Dark mode | Light mode |
|---|---|---|
| Best conditions | Dim rooms and night-time use | Bright rooms and daytime use |
| Long reading sessions | Comfortable for some, tiring for others | Easier for most people with normal vision |
| Battery on OLED screens | Saves power, most at high brightness | Uses more power on OLED |
| Photos and accent colours | Make them stand out | Show colours closer to how they look in print |
| Design effort | Needs its own palette, images and testing | Usually the default design |
If you would rather not build it yourself, our web development team can add a dark theme that respects device settings and passes contrast checks.
Conclusion
In conclusion, the option to include dark mode into your website comes down to personal preference and the demands of your audience. Some users may enjoy the greater battery life and modern look it offers, while others may find it distracting or choose the standard light setting instead.
You should think about adding a dark mode to your website or app if you’re competing with industry giants like Google, Apple, and Facebook. The key to a smooth and satisfying user experience is paying attention to and learning from your users.
Adding a dark mode to your website is a simple UX upgrade, especially when you’re working with a seasoned design agency like Itzfizz Digital.
It’s crucial to keep up with the changing demands and preferences of your audience, whether you choose to use dark mode or not. You can continuously improve your website’s UX and provide a first-rate digital experience by monitoring design trends and user feedback.
Contact Itzfizz Digital if you’re interested in modifying your user interface or learning more about dark mode for your website. We’ll guide you through the options and make sure your website stands out in the constantly shifting digital landscape.
