Every day, countless people browse the internet, making thoughtful design choices essential for delivering high-quality web experiences to all consumers. This demand has led to a wealth of design considerations, or best practices, that ensure accessibility, usability, and engagement across different audiences. Dark mode is one prominent accessibility practice, presenting websites in dimmer colors that can be gentler on the eyes during extended viewing.

With a few out-of-the-box features and careful attention to detail, web designers can appeal to the widest audience possible to build clients Squarespace websites that align with dark mode best practices.

Implementing web design best practices

Delivering websites with an overall greater user experience (UX) can increase the number of visitors able to comfortably use and navigate each site. This creates opportunities to drive product and service purchases, capture visitor information for future outreach and promotions, and boost long-term brand affinity.

When building client sites, apply web design best practices that appeal to both usability and aesthetics:

Select a legible, brand-aligned font

Text can visually complement a brand’s message, ideals, and ethos. Choose a font that’s easy to read and best represents your client’s business. For example, serif fonts work great for organizations in fashion or the arts, whereas fintech and software companies may be better represented with a more modern sans-serif option. Learn more about typography in web design.

Separate site elements with blank space

When site elements are tightly placed together, it can become overwhelming trying to understand all the text, navigation panels, images, calls to action (CTAs), and more on display. Adding blank space between elements makes each stand out more and streamlines visitors’ viewing experiences. Find a balance by removing overabundances of blank space, as these can make browsing feel laborious.

Deploy engaging, informative images

A site without images is like a day without sunshine—serviceable, but missing something. Images bring brand ideas to life in audiences’ eyes, showing them what a business is about in ways even the sharpest copy won’t. When opting for stock images, select ones that elicit the greatest visual impact. Learn more about planning website images.

Optimize designs for mobile

Audiences visit sites from a variety of devices. Squarespace sites employ responsive design to automatically adjust websites to fit any screen size and aspect ratio, including on mobile devices. Additional steps can be taken to ensure even more seamless mobile browsing experiences. 

You can preview the mobile experience with device view and adjust the layout, spacing, and font sizes to make the site as mobile-friendly as possible. Learn about additional best practices for mobile web design.

Design with dark mode in mind

Staring at bright screens for an extended time can be physically taxing. You can offer more pleasant site browsing experiences—and become more competitive as a web designer—by configuring each major element (like backgrounds and sections) to darker colors like gray, blue, and black. This emulates dark mode toggles that are popular among today’s website and app visitors. 

Need-to-know dark mode hacks

There are creative ways to design a more dark-mode-friendly site without a dark mode toggle. With a few clever adjustments, you can create a browsing experience that feels comfortable in low-light settings, enhancing accessibility and customer satisfaction.

1. Choose a dark template

Quickly create a dark-mode website aesthetic by starting with one of Squarespace’s customizable and curated templates:

Each template features several dark-mode visual hallmarks: dark color presets, dim background images, light font selections, for starters. You can also use Squarespace Blueprint AI to start with a curated template with a dark-mode-aligned color palette.

Pro tip: To determine whether visitors prefer a light or dark mode version of a page, you can use A/B testing to compare engagement and satisfaction across both versions. Direct half of your client’s traffic to the light version and the other half to the dark mode, and track key metrics like bounce rate, time spent on page, and clickthrough rates. Survey feedback can also provide insight into visitor comfort and aesthetic preferences. Analyzing these results will help reveal which version ultimately offers your clients’ customers a better experience, empowering you to make informed design decisions.

2. Use dark colors across the website

Dark color palettes serve as the foundation for emulating the dark mode experience on Squarespace sites. Mid-to-dark blue foreground site elements like buttons, hero banners, and footers are often used on pages designers anticipate audiences will spend lots of time on, while light-to-dark grays can create a similar but less heightened feeling. Both contribute to a site-wide dark-mode aesthetic that’s easier on viewers’ eyes.

3. Customize section backgrounds

Using darker background colors for sections can help mimic the feel of a true dark-mode experience, providing a more comfortable and accessible viewing option for users in low-light environments. By pairing these darker backgrounds with lighter text, you reduce eye strain and make content easier to read, enhancing the UX. This approach gives visitors the benefits of dark mode without needing the built-in toggle, creating a visually pleasing, modern aesthetic that’s both functional and stylish.

4. Lighten font colors

Lightening the font color on a darker background helps create the contrast needed for a dark-mode site experience. By using lighter text, readability improves against dark backgrounds, reducing eye strain for users in low-light settings. This adjustment mimics the high-contrast, easily readable aesthetic of true dark mode, while maintaining a visually balanced and user-friendly design. You’ll also want to adjust colors of related site elements, like buttons and hyperlinks, to match chosen font colors and ensure site-wide cohesion.

5. Darken images with filters

High-quality, on-brand images can breathe life into a client’s web page, but may not fit the dark mode aesthetic by default. Applying darkening filters to images can create a dim effect that complements a dark-mode site experience, giving visuals a subtle, softened look that aligns with the darker backgrounds and lighter text. This technique enhances readability by reducing visual glare while maintaining the richness of images in a low-light style. The result is a cohesive, immersive aesthetic that’s easier on the eyes and offers a seamless, user-friendly browsing experience in line with dark-mode principles.

Web designers can dim images to better fit the dark-mode aesthetic using the dark image filters built into Squarespace’s image editor. This editor is available for most images uploaded to a website, but changes made using the editor permanently alter uploaded images, so back up all original image files.

Pro tip: Need images as a starting point? Search for and add stock images using the Unsplash and Getty Images integrations. Then, format them for optimal web display, and use the image editor to darken their appearance to match the dark-mode aesthetic.

6. Create dim image overlays

If your client is hesitant to permanently alter images on their site, toggling the image’s overall opacity is a great way to replicate image overlays in dark mode. You can also darken site images with Squarespace’s image editor. Create a solid black or dark gray overlay image with dimensions matching the image you want to darken, adjust its opacity as desired, then place the file on top of the main image.

For those with coding knowledge, you can use custom CSS to alter the behavior of image overlays based on a visitor’s action, such as when they hover their mouse over an image. Check out a step-by-step guide on creating image overlays from Circle member and Squarespace educator Becca Harpain of InsideTheSquare. 

Improve browsing experiences for the widest audience

Offering visitors the option to browse a website in dark mode can significantly enhance accessibility and provide a more user-friendly experience. For those with coding expertise, custom CSS can enable dynamic adjustments to elements like image overlays based on visitor preferences. And for those without coding experience, Squarespace offers built-in tools that replicate many dark-mode best practices, helping you to deliver a sleek, adaptable experience without custom development. Embracing dark mode thoughtfully can help foster inclusivity while adding a modern edge to your client’s online presence.

Want more?

Check out Squarespace Circle, Squarespace’s program for professional designers. Along with exclusive content, discounts, and other perks, Circle brings professionals together from across the globe to exchange advice while connecting with new clients and collaborators.