創建響應式、直觀的 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 應用程序的適應性和現代性，使其更具吸引力，更易于所有用戶使用。

慧都21周年慶年終大促現已開啟，DHTMXL全線產品參與優惠活動，聯系了解活動詳情。