- Compatible XF 2.x versions
Do your users prefer dark mode or light mode? Users that have a preference will likely have it set in their operating system - like in the latest iOS, Android, Windows 10, and more - so let your site detect their preference and automatically give them the style they prefer with Style Switch! Plus, with a simple toggle, your visitors can switch between the two seamlessly without reloading!
Please note, [TH] Style Switch works best when you don’t have too many themes installed. The best configuration for maximum compatibility with Style Switch is to have one light style, one dark style, and a child style below each. For autodetect, you should add an additional child style below whichever style you wish to be the primary. Style Switch works by switching the CSS formatting present in styles, so your light and dark mode styles should not contain any differences in HTML objects themselves. Attempting to use style switch between two dramatically different styles may not result in the expected experience. Only supported browsers and devices can utilize the auto-detect feature. You can still offer as many themes as you want to your visitors, but only set up 2 themes with this product to switch between that differ by no more than some minor CSS and colors. View a list of supported browsers here.
Here are some of our dark & light themes that would work well with Style Switch:
UI.X 2 - UI.X 2 Dark
Drift - Drift Dark
iO - iO Dark Mode
UI.X Classic - UI.X Classic Dark
- Easily select light, dark, and default styles
- Load additional stylesheets with light and dark styles
- Enable or disable color mode auto-detect for one style
- Adjust the dark & light mode toggle position
- Preferred style is automatically selected based on the dark & light mode detected from supported devices and browsers
- Provides a simple toggle switch to allow users to make their own choice
- Smoothly transition between similar styles without reloading