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.
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.
Introducing Theme Switching in DHTMLX Scheduler
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() method:
scheduler.setSkin("terrace");
// Switch to the dark theme
scheduler.setSkin("dark");
These commands allow for the dynamic updating of the Scheduler’s appearance, providing a seamless user experience.
Identifying the Browser’s Preferred Theme
Modern browsers offer the possibility to detect a user’s preferred theme through the prefers-color-scheme CSS media feature. You can leverage this to adjust our Scheduler’s theme accordingly:
This code checks if a user set his preference to dark mode, returning a boolean value.
Putting Everything Together
Let’s combine the theme detection with the component’s 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:
// Initialize Scheduler plugins and configurations
scheduler.plugins({
quick_info: true
});
scheduler.config.cascade_event_display = true;
// Function to dynamically update the Scheduler's theme
function updateSchedulerTheme() {
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDarkMode) {
scheduler.setSkin("dark");
} else {
scheduler.setSkin("terrace");
}
}
// Set the initial theme based on the user's preference
updateSchedulerTheme();
// Listen for changes in the preferred color scheme and update the theme
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateSchedulerTheme);
// Initialize the DHTMLX Scheduler
scheduler.init('scheduler_here', new Date(2024, 3, 20), "week");
});
By embedding the theme update logic within the DOMContentLoaded 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.
Adding a UI Control for Switching Themes
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.
You need to modify the updateSchedulerTheme 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.
// We use "default" for the Browser Default option
if (!selectedTheme || selectedTheme === 'default') {
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDarkMode) {
scheduler.setSkin("dark");
} else {
scheduler.setSkin("terrace");
}
} else {
scheduler.setSkin(selectedTheme);
}
}
The markup for the switcher control can look like this:
// We use "default" for the Browser Default option
if (!selectedTheme || selectedTheme === 'default') {
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDarkMode) {
scheduler.setSkin("dark");
} else {
scheduler.setSkin("terrace");
}
} else {
scheduler.setSkin(selectedTheme);
}
}
The final step is to connect the control to the updateSchedulerTheme function. It can be done with the following code:
themeSwitcher.forEach(radio => {
radio.addEventListener('change', function() {
updateSchedulerTheme(this.value);
});
});
In this sample, you can see how everything comes together.
Conclusion
Integrating responsive theme switching in web applications, as demonstrated with the DHTMLX Scheduler, elevates the user experience by making applications adaptable to users’ preferences. By embracing such user-centric features, you underscore the adaptability and modernity of your web application, making it more engaging and accessible to all users.