For most hues, start with a 20% saturation and tweak the intensity against the background. Use less saturated colors with dark mode to improve readability and accessibility. In this article, you will find many different dark UI design concepts by designers for website landing pages, dashboards and mobile app interfaces. If you are looking to embrace dark theme in your own product design, then our showcase of inspiring Dark UI design examples is for you. Additional space can make a dark design feel less cramped or intimidating, while putting more emphasis on key design elements or text. Dark UI makes it easier to use an app or website in low-light environment, reduces eye strain and also improves battery life for devices with OLED displays. Maximize use of white (or in this case, dark) space. What good does a shadow do in the dark? A shadow is something that’s connected to a light source, which is why they can feel natural in light mode designs. In most instances, it will be easier to manage and maintain consistently.ĭitch the drop shadows. Use a limited, tight color palette for dark mode, generally 2 to 3 colors. This can dramatically change how the design looks or how you feel about it. Test dark mode designs in different levels of light and environmental conditions. Three levels of text emphasis is ideal: Most important should be 88% white, the main body text (medium emphasis) can be around 50%, and low-value text or disabled text elements can be less than 40% white. Ensure adequate variance between percentages to achieve optimum reading comprehension and accessibility. Use transparency and opacity to your advantage, particularly with text elements. Ethan Marcotte does a nice job of that with his website the toggle button is in the footer. What matters is that dark mode is visually usable and still “feels” like a part of your brand’s design identity.Īllow a dark/light mode toggle. Darker colors will have less visual weight thanks to a dark background, with lighter colors carrying the most visual importance.ĭark mode does not have to be derived from a light theme. Add blue (1a1f2c), green (212c1a), or purple (161118) for dramatically deeper options.Įstablish a hierarchy of elements within your color palette using tints and shades to create a sense of depth. The Material Design recommendation of # 121212 is a good starting point. A close-to-black option has deeper color, a richer feel, and can better establish the right emotional connection with your audience.