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)");
-
-        // 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);
+        return handleDarkMode();
     }, []);
 
 
@@ -48,19 +28,14 @@ function App() {
 
     return (
         <>
-            <div>
-                <a href="https://vite.dev" target="_blank">
-                    <img src={viteLogo} className="logo" alt="Vite logo"/>
-                </a>
-                <a href="https://react.dev" target="_blank">
-                    <img src={reactLogo} className="logo react" alt="React logo"/>
-                </a>
-            </div>
-            <h1>Vite + React</h1>
-            <div className="card">
-                <button className="btn w-56 m-2" onClick={() => setCount((count) => count + 1)}>
+            <h1>Vite, React, Syncfusion, Daisyui Demo</h1>
+            <div className="card shadow-md w-2/3 mt-5 bg-auto-50">
+                <div className="card-body">
+                    <button className="btn w-full m-2" onClick={() => setCount((count) => count + 1)}>
                         count is {count}
                     </button>
+                </div>
+            </div>
 
             <div className="badge badge-secondary m-4">primary</div>
 
@@ -81,7 +56,6 @@ function App() {
             <p>
                 Edit <code>src/App.tsx</code> and save to test HMR
             </p>
-            </div>
             <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);
+    };
+}