Dark mode on the web: A case study for dynamic theming in XenForo 2.1

With the release of iOS 13, dark mode has shifted from a heavy computer-user’s ultimate feature to something the average person wants to try. Many of our team members swear by it, so when the idea came up to extend the popular XenForo forum system to allow for automatic styling based on a users’ OS-level color preferences, we jumped on it. That’s how Style Switch was born.

The core goals for Style Switch

Obviously, the number one feature (and the main reason for developing Style Switch) is to enable automatic detection of color preferences set by users in their operating system. As of writing, iOS 13, MacOS Mojave, Android 10, and Windows 10 all support setting an OS-wide “Dark Mode” while also allowing browsers to utilize the value of that setting. On top of that, some operating systems support automatic switching based on time, so their color mode changes based on the rise of the sun! With Style Switch, the style changes when the mode changes!

Additionally, we wanted to ensure that users of devices/browsers that didn’t support OS-wide dark mode or detection of that setting could easily switch between modes themselves on the forum without having to reload the page. This switch creates a smooth transition between styles, which is much more appealing visually.

How we implemented dark mode detection on XenForo

With a solid idea in place, we could begin to plan out the technical implementation of dark mode detection for XenForo.

The biggest challenge for automatic detection of OS-level color modes is browser support. We want any visitor with a modern, supported browser to seamlessly experience their preferred color mode automatically upon visiting the site. For visitors with an unsupported browser, or no ability to set OS-wide color mode settings, we want to ensure that it loads with a default style.

We could go with basic XF styles (choosing a new style on page load), but the problem in that situation was that it wasn’t a smooth transition without initial visitor interaction.

Instead, we chose to go with media queries on link tags using the ‘prefers-color-scheme’ CSS media feature. To accomplish this, we added a link tag using a light color scheme and a separate link tag using the dark color scheme allowing the browser to load the appropriate stylesheet based on what media query matched. This solution resulted in a much better experience on supported browsers, but resulted in legacy browsers not matching either stylesheet.

We initially considered fixing this by only applying the non-default color scheme media query to a single link tag which would allow legacy browsers to load the default color, but that would have caused browsers supporting the non-default color scheme to load two full copies of the page styling reducing page performance. Instead, we settled on a Javascript based solution that would insert the legacy stylesheet without the media query for any browser that didn’t support ‘prefers-color-scheme’. While this does require render blocking Javascript on page load, we evaluated the impact of this JS against the impact of loading two copies of the styling.

When we accounted for the likelihood that a user would be on a supported browser, we determined that the performance impact of this was shown to generally be less than the substantial impact of loading two entire copies of the stylesheet. Finally, if Javascript isn’t enabled, a default style tag is placed in a ‘noscript’ tag and loaded, ensuring that the visitor can interact with the site without issue.

The result: Dark mode detection and smooth transitions for XenForo with Style Switch

There are a number of things that could be said about this feature, but it would be best to show it, first. See the .gif below for an example of the functionality!

As you can see, the toggle functionality of Style Switch is smooth. No refreshing of the page. No jarring transition. No waiting for separate elements to become usable. It just. Plain. Works.

The detection feature works spectacularly well on supported devices and browsers. The best part? Most visitors won’t even be aware of it. Some of the best user experience is done without the user being aware that anything is happening; they just come to the site and discover it is already using their preferred color mode.

If you’d like to see Style Switch live, feel free to check out our demo forum!

Getting Style Switch and bringing OS-detection dark mode to XenForo

Style Switch is a fantastic addon for XenForo, but of course we think that (after all, we made it)! If you’re not convinced, let’s outline some cases where Style Switch can help you with user engagement and add extra “cool factor” to your XenForo setup.

Apple users

The first case, and the primary reason we developed Style Switch, is for Apple-centric users. With Dark Mode now available on iOS 13, Apple users who were previously unaware of the usefulness of such a feature are now embracing it. Adding this extra bit of functionality to your forum will help your visitors feel right at home!

Developers

Developer-centric forums will also benefit from automatic dark mode detection; about 70% of our team swear by dark mode for their user interfaces (in typical Slashdot poll fashion, 2 voted for tomato), and there have been countless memes shared about those few developers who actually use light mode. It is a good idea to be inclusive to those who do like light mode (at least, until they are converted to the dark side), so don’t forget them!

Gamers

Gamers get a lot of grief, and the common “gaming all night in mom’s basement” meme bears no truth with us; we’re gamers, too! Regardless of stereotypes, gamers tend to have a lot of screen time, and saving their eyes from overly-bright pixels can help ensure that any gamer who visits your forum will continue to come back. Not all gamers prefer dark mode, however, so being able to automatically provide an appropriate style to your gaming forum will help maintain your user base!

Get Style Switch Today

Style Switch is out now and ready for your XenForo 2.1+ forum! You can purchase it from the ThemeHouse store today. Don’t forget to check out the documentation for Style Switch. If you don’t have a pair of dark & light themes, check out our collection of XenForo 2 themes!