Frederic Beckmann
7b1c4c27fe
Extract dark mode logic into a reusable helper function to improve code clarity and maintainability. Updated the UI layout for better structure and styling, including replacing placeholder logos and enhancing card design.
25 lines
911 B
TypeScript
25 lines
911 B
TypeScript
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);
|
|
};
|
|
} |