How I Added Dark Mode to the MethodWorx Website Using Tailwind CSS

While running maintenance on the MethodWorx website, I wanted to explore how difficult it would be to introduce a dark mode experience. Coming off the back of an accessibility project, dark mode felt like a natural enhancement to the site's overall user experience.

Fortunately, because the website was already using Tailwind CSS, the technical implementation was relatively straightforward. Most of the effort went into ensuring the theme felt consistent with the MethodWorx brand and delivered a polished experience across every page.

In this post, I'll walk through the approach I took and the lessons I learned while implementing dark mode.

Why I Decided to Add Dark Mode

Before writing any code, I considered whether dark mode genuinely added value or was simply following a trend.  Dark mode aligned well with our sites audience and offered several practical benefits:

• Improved accessibility for users in low-light environments.
• A likely increase in user time on the site.
• A chance to work on our brands identity on dark backgrounds (one that l had not given much thought over)

With the business case established, I moved on to implementation.

Configuring Tailwind for Dark Mode

The first thing I did was configure Tailwind to use its class-based dark mode functionality. By using a class-based approach l was able to implement dark mode step-by-step, giving myself milestones to work towards.

I setup a simple project management guide;

·       Create a black background, white text inversion of the page.

·       Triage the critical accessibility elements; links, calls-to-action, lockups, icons.

·       Mock up a simple colour chart, trying to keep a contrast ratio between backgrounds and text of at least 5:1.

·       Apply the new colours to each component.  As the site has been broken down into simple abstractions this felt like the quickest implementation.

Start to finish the styling of the dark mode took about 6 hours.  With only a few distractions of tidying up some parts of the front end that needed some attention.

Building the Theme Toggle

Once the styling was in place, I needed a way for users to switch between themes.  And for their preference to be saved.  The correct operating system theme also needs to be applied to the site, when a user visits the MethodWorx site for the first time.

Again, this was a simple jotter pad list to break it down into each of its separate tasks.

1. Use window. API to match the media ‘prefer colour scheme’.  This goes into the Head of the site, so that it is run before the page loads.
2.   Access local storage and set the window.matchMedia preference.  If the user leaves the site and comes back later, their preferred colour scheme will be used.
3. Add a way to update the local storage preference using a simple toggle switch.

The first was task was the simplest, when the site loads, run a simple function that sets the preferred media type on the document.  This was simply expanded to include setting this preference to the local storage.

For the final task l wanted to include the colour scheme preference toggle button within the header of the site, unfortunately the header of the site uses Vue,js rather than vanilla Js.  After a bit of thought, l chose to create a new method within the already existing Vue to update the local storage, and the data theme.

To some this may feel like a clumsy way to implement the toggle, but by not trying to mix and match Javascript implementation, this felt like the best compromise to give users a good experience.

With the user toggle implemented and tested of few real-world devices, l was happy with the result.

Beyond Simple Colour Changes

One of the biggest lessons I learned during the project was that implementing dark mode isn't simply a matter of swapping light backgrounds for dark ones.

I spent time reviewing:

• Text contrast and accessibility.
• Button visibility.
• Navigation usability.
• How our brand lockup would look in dark mode.

Every element needed to work just as well in dark mode as it did in light mode. In many cases, colours that looked great on a white background required subtle adjustments when displayed against darker surfaces.

Final Thoughts

The mini day-project of implementing dark mode on the MethodWorx website turned out to have a noticeable impact on user experience.

And importantly, working on this project helped me re-evaluate how small changes, can have knock on effects.  By adding a dark mode, l needed to think how our branding colours work, while still being accessible, and legible.

Luke Erhlanderr – Head of Design / MethodWorx