feat: MUI test

pages/_app.tsx

@@ -13,7 +13,6 @@ import Footer from "@/components/footer/Footer";
 import { store } from "@/redux/store";
 import Script from "next/script";
 import DeviceEventsBridge from "@/components/common/DeviceEventsBridge";
-import { usePathname } from "next/navigation";
 
 // Thunks importieren
 import { getKueDataThunk } from "@/redux/thunks/getKueDataThunk";
@@ -39,22 +38,33 @@ if (typeof window !== "undefined") {
 }
 
 import "@/styles/globals.css";
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
+import { muiTheme, buildTheme } from "@/styles/muiTheme";
 
 function MyApp({ Component, pageProps }: AppProps) {
+  // Rebuild theme on client if dark mode toggles (simple example)
+  const [theme, setTheme] = useState(muiTheme);
+  useEffect(() => {
+    const observer = new MutationObserver(() => setTheme(buildTheme()));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
   return (
     <Provider store={store}>
-      {/* Load global data: dev -> API mock JS; prod -> real device JS from public */}
-      {process.env.NODE_ENV === "development" ? (
-        <Script
-          src="/api/cpl/kabelueberwachungAPIHandler"
-          strategy="afterInteractive"
-        />
-      ) : (
-        <Script src="/CPL/SERVICE/kueData.js" strategy="afterInteractive" />
-      )}
-      <AppContent Component={Component} pageProps={pageProps} />
-      {/* Bridge window events -> Redux (works across all pages) */}
-      <DeviceEventsBridge />
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {process.env.NODE_ENV === "development" ? (
+          <Script
+            src="/api/cpl/kabelueberwachungAPIHandler"
+            strategy="afterInteractive"
+          />
+        ) : (
+          <Script src="/CPL/SERVICE/kueData.js" strategy="afterInteractive" />
+        )}
+        <AppContent Component={Component} pageProps={pageProps} />
+        <DeviceEventsBridge />
+      </ThemeProvider>
     </Provider>
   );
 }
@@ -67,7 +77,6 @@ function AppContent({
   pageProps: AppProps["pageProps"];
 }): JSX.Element {
   const dispatch = useAppDispatch();
-  const pathnameHook = usePathname();
   const [sessionExpired] = useState(false);
   const mode = "DIA0"; // oder aus Router oder Session
   const type = 0; // Beispiel: 0 für "loop", 1 für "iso" (bitte ggf. anpassen)