Dark Mode

Your constantly-updated definition of Dark Mode and collection of videos and articles
78 shares

What is Dark Mode?

Dark mode is a feature that changes the color scheme of an application or website from light to dark. It's a popular option for those who prefer a less bright and more subdued interface.

With dark mode, the background is typically black or dark gray, and the text and icons are white or light. This can reduce eye strain, especially in low-light environments. Additionally, some people find it more aesthetically pleasing and easier to read.

© Apple, Fair Use.

Benefits of Dark Mode on Different Devices and Platforms

Dark mode is available on various devices and platforms, including smartphones, laptops, desktops, and web browsers. Here are some benefits of using dark mode on different devices:

  • On smartphones, dark mode can help save battery life as the display consumes less power to produce black pixels.

  • On laptops, dark mode can help reduce eye strain when using your computer in low-light conditions or at night. This is because it reduces the amount of blue light emitted from the screen, which can also be particularly beneficial if you work long hours on your computer.

  • For users with OLED screens, dark mode can extend the lifespan of their displays by reducing the amount of power used to light up individual pixels.

Accessibility Benefits of Dark Mode

In addition to reducing eye strain and improving the aesthetics of an interface, dark mode can also have significant accessibility benefits, for example:

  • Reduced Glare: Bright white backgrounds can cause glare, making it difficult for some users to read text or view images. On the other hand, dark mode reduces glare and makes it easier for these users to interact with an application or website.

  • Improved Contrast: For users with low vision or color blindness, high contrast between text and background is essential for readability. Dark mode often provides better contrast than light mode due to lighter text on a darker background.

  • Better Visibility in Low-Light Environments: Users with sensitivity to bright light may find it uncomfortable or even painful to view a bright white screen in low-light environments. Dark mode reduces the amount of light emitted from the screen and can make it more comfortable for these users to use an application or website.

When Not to Use Dark Mode

While dark mode has many benefits, there are also some potential drawbacks. For example, dark colors can evoke negative emotions associated with mourning or depression. Moreover, using dark mode in brightly-lit conditions may increase eye strain. Individuals with myopia or astigmatism may also experience halation, making text less readable. Dark mode may also lower reading comprehension and focus for some users. Finally, it's worth noting that dark mode does not necessarily improve battery life on older devices without OLED screens.

How to Design User Interfaces That Support Dark Mode

Keep in mind the increasing popularity of dark mode and ensure that your design is compatible with this feature. Here are some best practices for designing UIs that work well in both light and dark modes:

  • Use high-contrast colors: UI elements, such as buttons or text, need to have high-contrast colors that are easily distinguishable from each other. This is especially important in dark mode, where the color palette is limited, and low contrast can make it difficult to read or navigate. Remember that images and icons will appear on a darker background in dark mode. So, ensure they remain visible and don't blend into the background by using colors that provide enough contrast.

  • Avoid pure black backgrounds: While pure black backgrounds may seem like a good fit for dark mode, they can be too harsh on the eyes. Instead, consider using a very dark gray or navy blue background, which provides enough contrast but is easier on the eyes.

  • Test your design in both light and dark modes: Test your design thoroughly to ensure it works well in both light and dark modes. This will give you an idea of how your design looks and feels in different lighting conditions.

  • Provide an option to switch between modes: Not all users prefer one mode over the other, so make sure to provide an option to switch between light and dark modes. You can achieve this through a simple toggle switch or syncing with the device's system settings.

  • Avoid High Saturation: Colors with high saturation can appear too bright or overpowering in dark mode. To avoid this issue, consider using less saturated colors or adjusting the saturation levels of your existing colors.

  • Test Your Designs in Both Modes: As with any aspect of UI design, it's essential to test your icons and images in light and dark modes to ensure they look great in all lighting conditions. This will help you identify any issues with visibility or contrast before releasing your product.

Learn More about Dark Mode

Take our Mobile UI Design course.

Read this informative article on dark mode and whether or not it is worth it.

Do you love dark mode? Learn why it is so captivating

Check out these guidelines for dark mode from Google Material.

Answer a Short Quiz to Earn a Gift

Question 1

What best defines dark mode in digital applications?

1 point towards your gift

Question 2

How does dark mode contribute to battery saving on mobile devices?

1 point towards your gift

Question 3

Which accessibility benefit does dark mode offer?

1 point towards your gift

Question 4

In which condition is dark mode not beneficial?

1 point towards your gift

Question 5

What is a recommended practice for dark mode?

1 point towards your gift

Better luck next time!

0 out of 5 questions answered correctly

Do you want to improve your UX / UI Design skills? Join us now

Congratulations! You did amazing

5 out of 5 questions answered correctly

You earned your gift with a perfect score! Let us send it to you.

Letter from IxDF

Check Your Inbox

We’ve emailed your gift to name@email.com.

Do you want to improve your UX / UI Design skills? Join us now

Literature on Dark Mode

Here’s the entire UX literature on Dark Mode by the Interaction Design Foundation, collated in one place:

Learn more about Dark Mode

Take a deep dive into Dark Mode with our course Mobile UI Design .

In the “Build Your Portfolio” project, you’ll find a series of practical exercises that will give you first-hand experience of the methods we cover. You will build on your project in each lesson so once you have completed the course you will have a thorough case study for your portfolio.

Mobile User Experience Design: UI Design is built on evidence-based research and practice. Your expert facilitator is Frank Spillers, CEO of ExperienceDynamics.com, author, speaker and internationally respected Senior Usability practitioner.

All open-source articles on Dark Mode

Please check the value and try again.

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this page.

Interaction Design Foundation - IxDF. (2021, December 9). What is Dark Mode?. Interaction Design Foundation - IxDF.

New to UX Design? We’re Giving You a Free ebook!

The Basics of User Experience Design

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
312,693 designers enjoy our newsletter—sure you don’t want to receive it?