TikTok has it. Gmail has it. Your mobile phone has it. And no, this isn’t about your secrets.
Dark mode, dark themes or dark user interfaces—whatever you may call it—have amassed a cross-platform, cross-device cult following as the default for creative professionals. No longer merely a web design trend, dark mode design has become a new pillar of good website design, thanks to factors like added accessibility benefits and reduced eye strain. (The proof is in the black and white websites popping up all over.)
More than a style preference, dark mode design is an effective practice. Facebook and Instagram observed: “users spend 15% more time on the platform when using Dark Mode compared to Light Mode.” With site and app owners eager to maximize engagement, expect to find more dark mode designs—and more demand for it—around you.
Whatever it is you’re designing—Wix Studio websites included—don’t neglect the dark mode design. Dark mode users “expect all apps and games to respect their preference,” according to Apple. Read on for guidelines on how to give your site visitors and product users precisely the dark mode UI they want.
Create a website with a dark mode design on Wix Studio.
What is dark mode?
We’ll keep it short.
Dark mode gives users a better experience on devices, apps and sites in low-light conditions. By using only darker colors, a dark mode UI design reflects less light and requires less eye strain. This helps when using a mobile phone in a dark room at night or after a full workday staring at a screen. An added bonus: dark mode uses less battery power, so it doesn’t drain out devices as fast
Try these dark website templates on Wix Studio to start your next design.
11 best practices for websites with a dark mode design
01. Stay away from pure colors, like black backgrounds and white text
In the world of dark mode design, pure colors are extreme colors and cause increased eye strain. Instead of a pure black background, consider a close-to-black alternative which also lends a more professional, sophisticated feel. The Material Design recommendation of # 121212 is a good starting point. To this, add blue (1a1f2c), green (212c1a) or purple (161118) for dramatically deeper options. As for text, swap out pure white for an off-white (fAf9f6) or light gray (d3d3d3) tone. Together, black and white alternatives are gentler on the eyes.
02. Choose familiar colors (but fewer of them)
Keep it all in the family. Your site’s dark mode colors should look related to the brand guidelines. Choose colors (or versions of them) from the brand’s identity, and check that they align with dark mode usability.
Bear in mind that your site’s dark background isn’t a place to set off fireworks. Limit the number of colors you use to keep the gentle visual vibes that are intrinsic to a dark mode design. And be strategic about how to use these few colors. Thin linework is a good place to add a bright color in moderation—it subtly adds emphasis and depth.
03. Ditch the drop shadows
What good does a shadow do in the dark? Shadows are derived from a light source, which is why they look natural in light mode designs. But in dark mode websites, they’re completely unnecessary. Instead, suggest height, depth and layers through a combination of color hierarchy, transparency and opacity—explained further down the list.
04. Establish a hierarchy of colors for depth and layers
Now that you’ve chosen your dark mode colors, assign each one a consistent role in your dark mode design story: for hovers, buttons, grid lines and other layout elements. Explore different tints and shades of these colors to create a sense of depth or layered elements. Given the site’s dark background, bear in mind that dark colors will have less visual weight, with lighter colors carrying the most visual importance.
Once you’ve created the perfect dark mode color palette, save it in your Wix Studio design library to use it again for your next site designs.
Start building your Wix Studio design library and scale your responsive web design.
05. Opt for less saturated colors for better text readability
Saturated hues—or the fullest, bright versions of colors—don’t show up well as text on dark backgrounds. Instead, reduce the saturation by 20-30% and the text will sit more easily on the eye. Often, dark mode text colors are desaturated versions of light mode text colors—give these a try for a color palette that’s in harmony across design modes.
06. Use transparency and opacity to your advantage, particularly with text elements
Wait, what? Transparency helps with visibility in dark mode?
That’s right. Adding transparency or opacity to text reduces eye-straining contrasts. Play with the effects’ percentages and find the right balance for optimum visibility and accessibility. Consider setting three levels of text strength for your site: headlines around 88% white; the main body text (medium strength) around 50%; and low-value text or disabled text elements less than 40% white.
07. Maximize use of white (or in this case, dark) space
Give elements on your site plenty of room to breathe. Because dark mode designs use different hues of a single dark color, the eye needs more support to distinguish between these colors and the visual hierarchy. In this case, more is more: adding white space can make a dark design more cohesive, and helps key design elements or text get the salience they deserve.
08. Assess if it’s needed to also optimize site images
Images—especially large ones—set on white or bright, colorful backgrounds will work against the dark mode experience. You still want the main objects in your images to pop, but switch to a dark background. Use CSS to configure your site to load either the light or dark mode image as needed for the individual user’s preference. (With tools like Wix Studio’s AI image creator, enter a prompt to produce dark mode friendly images.)
09. Check that dark mode design color choices are accessible-friendly
When it comes to accessibility, the top concern with dark mode is color choice and contrast. Run all color choices through an accessibility checker to ensure there’s enough contrast between background and foreground colors. (In fact, it’s wise to do a full website accessibility check by following these ten steps.)
10. Add a dark-to-light mode toggle to support accessibility
Some sites go purely dark mode. Others provide a light-to-dark toggle for the user to choose their preferred UX. To create this mechanic, add JavaScript and custom CSS to your site—this sets up the on/off toggle and programs the dark-mode color equivalents for your light-mode theme. (For one way to add this code on Wix Studio, check out the video below.)
For some users, light mode isn’t a viable option, such as individuals with photophobia who are highly sensitive to light. Similarly, dark mode designs have challenges for some users. The bottom line is that each user should choose their optimal experience, so providing both light and dark mode web designs is the most accessible route.
11. Test dark mode designs in different levels of light and environmental conditions
QA your dark mode design for different possible viewing conditions. Play around with the brightness of your mobile phone screen. Pull up the site in rooms with different levels of light. You’ll see how the design changes, and if it’s user friendly or requires tweaks.
Sign up for Wix Studio and start your next web design.
.png)
