Refactor dark mode handling and update UI components

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.

react-vite-client/src/App.tsx

@@ -1,8 +1,7 @@
 import {useEffect, useState} from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css' // Ensure a declaration for CSS is added in a .d.ts file
 import {ColumnDirective, ColumnsDirective, GridComponent} from '@syncfusion/ej2-react-grids';
+import {handleDarkMode} from "./theme_helpers/ThemeHelpers.ts";
 
 
 function App() {
@@ -10,26 +9,7 @@ function App() {
 
 
     useEffect(() => {
-        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        return handleDarkMode();
-
-        // Function to update dark mode for Syncfusion controls
-        const updateDarkMode = (e: MediaQueryListEvent) => {
-            if (e.matches) {
-                // If the system is in dark mode, add the class to your container or body
-                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 as unknown as MediaQueryListEvent);
-
-        // Listen for changes in the system preference:
-        mediaQuery.addEventListener("change", updateDarkMode);
-
-        return () => mediaQuery.removeEventListener("change", updateDarkMode);
     }, []);
 
 
@@ -48,40 +28,34 @@ function App() {
 
     return (
         <>
-            <div>
+            <h1>Vite, React, Syncfusion, Daisyui Demo</h1>
-                <a href="https://vite.dev" target="_blank">
+            <div className="card shadow-md w-2/3 mt-5 bg-auto-50">
-                    <img src={viteLogo} className="logo" alt="Vite logo"/>
+                <div className="card-body">
-                </a>
+                    <button className="btn w-full m-2" onClick={() => setCount((count) => count + 1)}>
-                <a href="https://react.dev" target="_blank">
+                        count is {count}
-                    <img src={reactLogo} className="logo react" alt="React logo"/>
+                    </button>
-                </a>
-            </div>
-            <h1>Vite + React</h1>
-            <div className="card">
-                <button className="btn w-56 m-2" onClick={() => setCount((count) => count + 1)}>
-                    count is {count}
-                </button>
-
-                <div className="badge badge-secondary m-4">primary</div>
-
-                <div role="alert" className="alert alert-error">
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="h-6 w-6 shrink-0 stroke-current"
-                        fill="none"
-                        viewBox="0 0 24 24">
-                        <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth="2"
-                            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                    </svg>
-                    <span>Error! Task failed successfully.</span>
                 </div>
-                <p>
-                    Edit <code>src/App.tsx</code> and save to test HMR
-                </p>
             </div>
+
+            <div className="badge badge-secondary m-4">primary</div>
+
+            <div role="alert" className="alert alert-error">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-6 w-6 shrink-0 stroke-current"
+                    fill="none"
+                    viewBox="0 0 24 24">
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                </svg>
+                <span>Error! Task failed successfully.</span>
+            </div>
+            <p>
+                Edit <code>src/App.tsx</code> and save to test HMR
+            </p>
             <p className="font-bold underline">
                 Click on the Vite and React logos to learn more
             </p>

react-vite-client/src/index.css

@@ -13,7 +13,7 @@
 
 
 @plugin "daisyui" {
-    themes: light --default, dracula --prefersdark;
+    themes: light --default, dark --prefersdark;
 }
 
 

react-vite-client/src/theme_helpers/ThemeHelpers.ts

@@ -0,0 +1,25 @@
+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);
+    };
+}