From 95489a22db712ec3b350dc237bafe6f5d0d8d57f Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Thu, 15 Feb 2024 18:27:21 +0100
Subject: [PATCH] Updated the App.jsx

---
 webui/src/App.jsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/webui/src/App.jsx b/webui/src/App.jsx
index 9ba43ad..a8ac478 100644
--- a/webui/src/App.jsx
+++ b/webui/src/App.jsx
@@ -1,14 +1,20 @@
 import i18n from "./i18n.js";
-import {useState} from "react";
+import React, {useContext, useState} from "react";
 import {createBrowserRouter, RouterProvider} from "react-router-dom";
 import {routes} from "@/common/routes/server.jsx";
 import Root from "@/states/Root/index.js";
 import {TokenProvider} from "@/common/contexts/Token";
 import {ServerProvider} from "@/common/contexts/Server";
 import Login from "@/states/Login";
+import {CssBaseline, ThemeProvider} from "@mui/material";
+
+import LightTheme from "@/common/themes/light.js";
+import DarkTheme from "@/common/themes/dark.js";
+import {SettingsContext} from "@/common/contexts/Settings";
 
 export default () => {
     const [translationsLoaded, setTranslationsLoaded] = useState(false);
+    const {theme} = useContext(SettingsContext);
 
     const router = createBrowserRouter([
         {path: "/login", element: <Login />},
@@ -21,9 +27,13 @@ export default () => {
 
     return (
         <>
-            <TokenProvider>
-                <RouterProvider router={router} />
-            </TokenProvider>
+            <ThemeProvider theme={theme === "dark" ? DarkTheme : LightTheme}>
+                <CssBaseline />
+                <TokenProvider>
+                    <RouterProvider router={router} />
+                </TokenProvider>
+            </ThemeProvider>
+
         </>
     )
 }
\ No newline at end of file