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

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

在 DHTMLX Scheduler 中引入主題切換

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

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

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

這些命令允許動(dòng)態(tài)更新調(diào)度程序的外觀，提供無(wú)縫的用戶(hù)體驗(yàn)。

識(shí)別瀏覽器的首選主題

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

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

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

把所有東西放在一起

讓我們將主題檢測(cè)與組件的初始化結(jié)合起來(lái)，以確保 Scheduler 在加載時(shí)滿足用戶(hù)的系統(tǒng)主題偏好。此外，您還將確保 Scheduler 動(dòng)態(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");
});

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

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

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

您需要修改updateSchedulerTheme函數(shù)。為用戶(hù)選擇的主題添加一個(gè)參數(shù)。如果最終用戶(hù)選擇淺色或深色主題，您將直接應(yīng)用該主題。如果在瀏覽器中選擇了默認(rèn)主題，請(qǐng)使用瀏覽器設(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)用戶(hù)的偏好，從而提升用戶(hù)體驗(yàn)。通過(guò)采用此類(lèi)以用戶(hù)為中心的功能，您可以強(qiáng)調(diào) Web 應(yīng)用程序的適應(yīng)性和現(xiàn)代性，使其更具吸引力，更易于所有用戶(hù)使用。

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