創(chuàng)建響應(yīng)式、直觀的 UI 需要適應(yīng)用戶對應(yīng)用程序各個方面的偏好。其中一項可顯著提升用戶體驗的熱門功能是能夠在明暗主題之間切換。它在日程安排日歷等綜合組件中尤其有用。

本文將指導(dǎo)您在 DHTMLX Scheduler 中實現(xiàn)動態(tài)主題切換，使其適應(yīng)用戶設(shè)置的首選系統(tǒng)主題。

在 DHTMLX Scheduler 中引入主題切換

DHTMLX Scheduler 是一個功能強(qiáng)大的 JavaScript 調(diào)度小部件，內(nèi)置對不同主題的支持。在本指南中，我們將重點介紹如何在“深色”和默認(rèn)“淺色”（露臺）主題之間切換。可以使用setSkin()方法以編程方式在 DHTMLX Scheduler 中切換主題：

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

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

這些命令允許動態(tài)更新調(diào)度程序的外觀，提供無縫的用戶體驗。

識別瀏覽器的首選主題

現(xiàn)代瀏覽器可以通過CSS 媒體功能 prefers-color-scheme檢測用戶的首選主題。您可以利用此功能相應(yīng)地調(diào)整我們的 Scheduler 主題：

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

此代碼檢查用戶是否將其偏好設(shè)置為暗模式，并返回布爾值。

把所有東西放在一起

讓我們將主題檢測與組件的初始化結(jié)合起來，以確保 Scheduler 在加載時滿足用戶的系統(tǒng)主題偏好。此外，您還將確保 Scheduler 動態(tài)適應(yīng)這些偏好的變化：

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事件監(jiān)聽器中嵌入主題更新邏輯，您可以確保 Scheduler 不僅使用其配置和插件進(jìn)行初始化，而且還會立即采用用戶首選的主題。這種集成提供了主題之間的無縫過渡，從而增強(qiáng)了整體用戶體驗。因此，應(yīng)用程序變得更加個性化和易于訪問。

添加用于切換主題的 UI 控件

不要忘記讓最終用戶能夠手動切換主題。您需要對代碼進(jìn)行一些調(diào)整才能做到這一點。您必須添加一個簡單的控件，讓最終用戶可以從三個選項中選擇一個主題：瀏覽器默認(rèn)、淺色和深色。

您需要修改updateSchedulerTheme函數(shù)。為用戶選擇的主題添加一個參數(shù)。如果最終用戶選擇淺色或深色主題，您將直接應(yīng)用該主題。如果在瀏覽器中選擇了默認(rèn)主題，請使用瀏覽器設(shè)置中的首選主題。

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);
    }
}

切換器控件的標(biāo)記如下所示：

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函數(shù)。可以使用以下代碼完成：

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

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

結(jié)論

在 Web 應(yīng)用程序中集成響應(yīng)式主題切換（如 DHTMLX Scheduler 所示）可使應(yīng)用程序適應(yīng)用戶的偏好，從而提升用戶體驗。通過采用此類以用戶為中心的功能，您可以強(qiáng)調(diào) Web 應(yīng)用程序的適應(yīng)性和現(xiàn)代性，使其更具吸引力，更易于所有用戶使用。

慧都21周年慶年終大促現(xiàn)已開啟，DHTMXL全線產(chǎn)品參與優(yōu)惠活動，聯(lián)系了解活動詳情。