export function handleDarkMode(): () => void {
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");

    // Function to update dark mode for Syncfusion controls
    const updateDarkMode = (e: MediaQueryList | MediaQueryListEvent) => {
        if (e.matches) {
            // If the system is in dark mode, add the class
            document.body.classList.add("e-dark-mode");
        } else {
            // Otherwise, remove it
            document.body.classList.remove("e-dark-mode");
        }
    };

    // Set initial mode based on system preference:
    updateDarkMode(mediaQuery); // Pass the initial `mediaQuery` directly

    // Listen for changes in system preference:
    mediaQuery.addEventListener("change", updateDarkMode);

    // Cleanup function to remove the event listener
    return () => {
        mediaQuery.removeEventListener("change", updateDarkMode);
    };
}