The Mode Switcher widget is an element that allows your users to switch between the dark and light modes on your website.
By incorporating the Mode Switcher widget into your website, you offer users the flexibility to customize their viewing experience according to their preferences. This widget enhances accessibility, usability, and overall user satisfaction by catering to diverse user preferences and environmental conditions.
Adding a Mode Switcher Widget
To add a Mode Switcher widget:
- Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
- Go to the Widgets list on the Visual Editor Left Panel.
Type the widget name in the search bar, or expand the Advanced group to access the Mode Switcher widget.
- Drag the widget and drop it into your desired area, preferably within the Header.
Configuring the Mode Switcher Widget
To design the appearance and behavior of the Mode Switcher widget, activate the Property Panel of the widget by clicking it to access its Styles and Settings.
- Go to the widget Styles to make the required configuration of general styling features (see Global Styles) to achieve the desired visual and functional outcomes.
- Access the widget Settings to set its visibility (see Visibility Settings) on the website based on criteria such as your customers' location, session status, device type, browser, language preference, etc., to tailor it to specific user segments or conditions.
- Enable the Open on Hover feature to allow your customers to access the dropdown menu for Dark Mode and Light Mode options by simply hovering over the widget.
Note: The Mode Switcher widget uses the activated Dark Theme and Light Theme presets you have preconfigured and saved in the Design System > Colors tab.
💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.