Creating a responsive and intuitive UI involves adapting to the user’s preferences across various aspects of your application. One of the popular features that significantly enhances user experience is the ability to switch between light and dark themes. It can be especially useful in comprehensive components like scheduling calendars. <\/p>\n
This article will guide you through implementing dynamic theme switching in the DHTMLX Scheduler, making it adapt to the preferred system theme set by the user.<\/p>\n
DHTMLX Scheduler is a powerful JavaScript scheduling widget that comes with built-in support for different themes. In this guide, we’ll focus on toggling between the “dark” and the default “light” (terrace) themes. Switching the theme in DHTMLX Scheduler can be done programmatically with the setSkin()<\/strong> method:<\/p>\n These commands allow for the dynamic updating of the Scheduler’s appearance, providing a seamless user experience.<\/p>\n Modern browsers offer the possibility to detect a user’s preferred theme through the prefers-color-scheme CSS media<\/strong> feature. You can leverage this to adjust our Scheduler’s theme accordingly:<\/p>\n This code checks if a user set his preference to dark mode, returning a boolean value.<\/p>\n Let’s combine the theme detection with the component\u2019s initialization to ensure that the Scheduler meets the user’s system theme preference upon loading. Additionally, you’ll ensure that the Scheduler dynamically adapts to changes in these preferences:<\/p>\n By embedding the theme update logic within the DOMContentLoaded<\/strong> event listener, you make sure that the Scheduler not only initializes with its configuration and plugins but also immediately adopts the user’s preferred theme. This integration provides a seamless transition between themes, enhancing the overall user experience. As a result, the application becomes more personalized and accessible.<\/p>\n Don’t forget to enable end-users to switch themes manually. You’ll need to make a few adjustments to your code to do this. You have to add a simple control that allows end-users to select a theme from three options: Browser Default, Light, and Dark.<\/p>\n You need to modify the updateSchedulerTheme<\/strong> function. Add an argument for the user-selected theme. If the end-user chooses either the Light or Dark theme, you’ll apply that directly. If the default theme is selected in the browser, use the preferred theme from the browser settings.<\/p>\n The markup for the switcher control can look like this:<\/p>\n The final step is to connect the control to the updateSchedulerTheme<\/strong> function. It can be done with the following code:<\/p>\n
\nscheduler.setSkin<\/span>(<\/span>"terrace"<\/span>)<\/span>;<\/span>
\n
\n\/\/ Switch to the dark theme<\/span>
\nscheduler.setSkin<\/span>(<\/span>"dark"<\/span>)<\/span>;<\/span><\/div><\/div>\nIdentifying the Browser’s Preferred Theme<\/h5>\n
Putting Everything Together<\/h5>\n
\n \/\/ Initialize Scheduler plugins and configurations<\/span>
\n scheduler.plugins<\/span>(<\/span>{<\/span>
\n quick_info:<\/span> true<\/span>
\n }<\/span>)<\/span>;<\/span>
\n
\n scheduler.config<\/span>.cascade_event_display<\/span> =<\/span> true<\/span>;<\/span>
\n
\n \/\/ Function to dynamically update the Scheduler's theme<\/span>
\n function<\/span> updateSchedulerTheme(<\/span>)<\/span> {<\/span>
\n const<\/span> prefersDarkMode =<\/span> window.matchMedia<\/span>(<\/span>'(prefers-color-scheme: dark)'<\/span>)<\/span>.matches<\/span>;<\/span>
\n
\n if<\/span> (<\/span>prefersDarkMode)<\/span> {<\/span>
\n scheduler.setSkin<\/span>(<\/span>"dark"<\/span>)<\/span>;<\/span>
\n }<\/span> else<\/span> {<\/span>
\n scheduler.setSkin<\/span>(<\/span>"terrace"<\/span>)<\/span>;<\/span>
\n }<\/span>
\n }<\/span>
\n
\n \/\/ Set the initial theme based on the user's preference<\/span>
\n updateSchedulerTheme(<\/span>)<\/span>;<\/span>
\n
\n \/\/ Listen for changes in the preferred color scheme and update the theme<\/span>
\n window.matchMedia<\/span>(<\/span>'(prefers-color-scheme: dark)'<\/span>)<\/span>.addEventListener<\/span>(<\/span>'change'<\/span>,<\/span> updateSchedulerTheme)<\/span>;<\/span>
\n
\n \/\/ Initialize the DHTMLX Scheduler<\/span>
\n scheduler.init<\/span>(<\/span>'scheduler_here'<\/span>,<\/span> new<\/span> Date<\/span>(<\/span>2024<\/span>,<\/span> 3<\/span>,<\/span> 20<\/span>)<\/span>,<\/span> "week"<\/span>)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\nAdding a UI Control for Switching Themes<\/h5>\n
\n \/\/ We use "default" for the Browser Default option<\/span>
\n if<\/span> (<\/span>!<\/span>selectedTheme ||<\/span> selectedTheme ===<\/span> 'default'<\/span>)<\/span> {<\/span>
\n const<\/span> prefersDarkMode =<\/span> window.matchMedia<\/span>(<\/span>'(prefers-color-scheme: dark)'<\/span>)<\/span>.matches<\/span>;<\/span>
\n if<\/span> (<\/span>prefersDarkMode)<\/span> {<\/span>
\n scheduler.setSkin<\/span>(<\/span>"dark"<\/span>)<\/span>;<\/span>
\n }<\/span> else<\/span> {<\/span>
\n scheduler.setSkin<\/span>(<\/span>"terrace"<\/span>)<\/span>;<\/span>
\n }<\/span>
\n }<\/span> else<\/span> {<\/span>
\n scheduler.setSkin<\/span>(<\/span>selectedTheme)<\/span>;<\/span>
\n }<\/span>
\n}<\/span><\/div><\/div>\n
\n \/\/ We use "default" for the Browser Default option<\/span>
\n if<\/span> (<\/span>!<\/span>selectedTheme ||<\/span> selectedTheme ===<\/span> 'default'<\/span>)<\/span> {<\/span>
\n const<\/span> prefersDarkMode =<\/span> window.matchMedia<\/span>(<\/span>'(prefers-color-scheme: dark)'<\/span>)<\/span>.matches<\/span>;<\/span>
\n if<\/span> (<\/span>prefersDarkMode)<\/span> {<\/span>
\n scheduler.setSkin<\/span>(<\/span>"dark"<\/span>)<\/span>;<\/span>
\n }<\/span> else<\/span> {<\/span>
\n scheduler.setSkin<\/span>(<\/span>"terrace"<\/span>)<\/span>;<\/span>
\n }<\/span>
\n }<\/span> else<\/span> {<\/span>
\n scheduler.setSkin<\/span>(<\/span>selectedTheme)<\/span>;<\/span>
\n }<\/span>
\n}<\/span><\/div><\/div>\n
\nthemeSwitcher.forEach<\/span>(<\/span>radio =><\/span> {<\/span>
\n radio.addEventListener<\/span>(<\/span>'change'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>
\n updateSchedulerTheme(<\/span>this<\/span>.value<\/span>)<\/span>;<\/span>