Custom Light/dark Mode Toggle In Mainmenu
Remco
Hi,
I’m very excited about the new ability to configure variable colors in SP Page Builder Pro and about the built-in color switcher that lets you toggle between your configured modes. In most cases we only need a simple switch between light and dark mode.
Currently, the color switcher appears on the right side of the page, with an icon above and the color presets below. I would like to keep the core color-switching functionality but hide the default switcher UI on the right. Instead, I want to display a single icon in the main menu: when light mode is active, show a moon icon to switch to dark mode; when dark mode is active, show a sun icon to switch back to light mode.
Question: I can hide the default switcher with CSS, but is it possible to bind the color-switcher actions to my own icons? If so, could you please let me know how?
Thank you!
Kind regards, Remco
Toufiq
Accepted AnswerHi there,
Thanks for contacting us. Sorry, right now this feature/functionality is not available.
-Thanks
Remco
Accepted AnswerHi,
I know this functionality is not available, but i want to make it like i described, so can you answer my question please: I can hide the default switcher with CSS, but is it possible to bind the color-switcher actions to my own icons? If so, could you please let me know how?
Regards, Remco
Paul Frankowski
Accepted AnswerBT
If icons are FontAwesome, you can change their color using Custom CSS.
Remco
Accepted AnswerThanks to ChatGPT i have found a way: https://chatgpt.com/share/688cc5d5-0ab4-800c-9f0a-05bdf7b2f692
Maybe you can add this functionality to a future release of SP Page Builder Pro, i think many people would like this instead of your current widget on the right.
You can see it in action in this screenrecording: https://www.huisstijlmanager.nl/files/switcher.mov
Paul Frankowski
Accepted AnswerOk, but after all what for you need it? Web Accessibility or Design idea?
Remco
Accepted AnswerIt actually addresses both accessibility and modern design.
Dark mode reduces screen glare and blue light exposure, helping to lessen eye strain, especially in low light or evening environments. Nearly 82% of smartphone users now report using dark mode, and most prefer apps that offer a dark theme.
All major platforms including iOS, Android, Windows and macOS support dark mode natively, so seamless light and dark toggles have become a user expectation.
Research also shows that negative polarity displays significantly improve comfort during prolonged use.
These points demonstrate that a light and dark switch is not merely a design flourish but a fundamental accessibility feature and modern requirement.