「实战应用」如何在 DHTMLX Scheduler 中实现动态主题切换？

创建响应式、直观的 UI 需要适应用户对应用程序各个方面的偏好。其中一项可显著提升用户体验的热门功能是能够在明暗主题之间切换。它在日程安排日历等综合组件中尤其有用。

本文将指导您在 DHTMLX Scheduler 中实现动态主题切换，使其适应用户设置的首选系统主题。

在 DHTMLX Scheduler 中引入主题切换

DHTMLX Scheduler 是一个功能强大的 JavaScript 调度小部件，内置对不同主题的支持。在本指南中，我们将重点介绍如何在“深色”和默认“浅色”（露台）主题之间切换。可以使用setSkin()方法以编程方式在 DHTMLX Scheduler 中切换主题：

// Switch to the default light theme
scheduler.setSkin("terrace");

// Switch to the dark theme
scheduler.setSkin("dark");

这些命令允许动态更新调度程序的外观，提供无缝的用户体验。

识别浏览器的首选主题

现代浏览器可以通过CSS 媒体功能 prefers-color-scheme检测用户的首选主题。您可以利用此功能相应地调整我们的 Scheduler 主题：

const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

此代码检查用户是否将其偏好设置为暗模式，并返回布尔值。

把所有东西放在一起

让我们将主题检测与组件的初始化结合起来，以确保 Scheduler 在加载时满足用户的系统主题偏好。此外，您还将确保 Scheduler 动态适应这些偏好的变化：

window.addEventListener("DOMContentLoaded", function(){
  // 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");
});

通过在DOMContentLoaded事件监听器中嵌入主题更新逻辑，您可以确保 Scheduler 不仅使用其配置和插件进行初始化，而且还会立即采用用户首选的主题。这种集成提供了主题之间的无缝过渡，从而增强了整体用户体验。因此，应用程序变得更加个性化和易于访问。

添加用于切换主题的 UI 控件

不要忘记让最终用户能够手动切换主题。您需要对代码进行一些调整才能做到这一点。您必须添加一个简单的控件，让最终用户可以从三个选项中选择一个主题：浏览器默认、浅色和深色。

您需要修改updateSchedulerTheme函数。为用户选择的主题添加一个参数。如果最终用户选择浅色或深色主题，您将直接应用该主题。如果在浏览器中选择了默认主题，请使用浏览器设置中的首选主题。

function updateSchedulerTheme(selectedTheme) {
    // 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);
    }
}

切换器控件的标记如下所示：

function updateSchedulerTheme(selectedTheme) {
    // 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);
    }
}

最后一步是将控件连接到updateSchedulerTheme函数。可以使用以下代码完成：

const themeSwitcher = document.querySelectorAll('input[name="theme"]');
themeSwitcher.forEach(radio => {
    radio.addEventListener('change', function() {
        updateSchedulerTheme(this.value);
    });
});

在此示例中，您可以看到一切是如何组合在一起的。

结论

在 Web 应用程序中集成响应式主题切换（如 DHTMLX Scheduler 所示）可使应用程序适应用户的偏好，从而提升用户体验。通过采用此类以用户为中心的功能，您可以强调 Web 应用程序的适应性和现代性，使其更具吸引力，更易于所有用户使用。