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.
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.
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!
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 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!