added: working dark mode

src/App.jsx

@@ -1,16 +1,16 @@
 import './styles/App.scss'
 import {Outlet} from "react-router-dom";
-import {Box} from "@mui/joy";
+import {Sheet} from "@mui/joy";
 import Header from "./components/Header.jsx";
 
 function App() {
 
     return (
         <>
-            <Header />
-                <Box component="main" className="MainContent">
-                    <Outlet/>
-                </Box>
+            <Header/>
+            <Sheet component="main" className="MainContent">
+                <Outlet/>
+            </Sheet>
         </>
     )
 }

src/components/Chat.jsx

@@ -60,7 +60,7 @@ function Chat() {
                 flex: 1,
                 minHeight: 0,
                 overflowY: 'scroll',
-                backgroundColor: 'primary.50',
+                backgroundColor: 'background.level1',
                 pl: {xs: 1, md: 2}
             }}>
                 {messages.map((el, index) => {

src/components/Header.jsx

@@ -1,8 +1,19 @@
-import {Box, GlobalStyles, Sheet, Stack} from "@mui/joy";
+import {Box, GlobalStyles, Sheet, Stack, Typography} from "@mui/joy";
 import {Link as RouterLink} from "react-router-dom";
 import logoNeuraChatAi from "../assets/logo NeuraChatAi.png"
+import logoNeuraChatAiWhite from "../assets/logo NeuraChatAi white.png"
+import ModeToggle from "./ModeToggle.jsx";
+import {useEffect, useState} from "react";
+import { useColorScheme } from '@mui/joy/styles';
 
 function Header() {
+    const {mode} = useColorScheme();
+    const [logoHeader, setLogoHeader] = useState(mode)
+
+    useEffect(() => {
+        mode === 'light' ? setLogoHeader(logoNeuraChatAi) : setLogoHeader(logoNeuraChatAiWhite)
+    },[mode])
+
     return (
         <Sheet component="header"
                sx={{
@@ -28,18 +39,19 @@ function Header() {
                    justifyContent="center"
                    alignItems="center"
                    spacing={2}>
-                <Box component="img" src={logoNeuraChatAi} alt={"Logo NeuraChatAi"} sx={{
+                <Box component="img" src={logoHeader} alt={"Logo NeuraChatAi"} sx={{
                     maxWidth: {xs: 100, md: 100},
                 }}/>
-                <RouterLink to="/NeuraChatAi/">Homepage</RouterLink>
-                <RouterLink to="/NeuraChatAi/about">About</RouterLink>
+                <RouterLink to="/NeuraChatAi/"><Typography>Homepage</Typography></RouterLink>
+                <RouterLink to="/NeuraChatAi/about"><Typography>About</Typography></RouterLink>
             </Stack>
             <Stack direction="row"
                    justifyContent="center"
                    alignItems="center"
                    spacing={1}>
 
             </Stack>
+            <ModeToggle />
         </Sheet>
     )
 }

src/components/ModeToggle.jsx

@@ -0,0 +1,30 @@
+import {useEffect, useState} from 'react'
+import {Button, useColorScheme} from '@mui/joy';
+
+
+function ModeToggle() {
+    const { mode, setMode } = useColorScheme();
+    const [mounted, setMounted] = useState(false);
+
+    // necessary for server-side rendering
+    // because mode is undefined on the server
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    if (!mounted) {
+        return null;
+    }
+
+    return (
+        <Button
+            variant="outlined"
+            onClick={() => {
+                setMode(mode === 'light' ? 'dark' : 'light');
+            }}
+        >
+            {mode === 'light' ? 'Turn dark' : 'Turn light'}
+        </Button>
+    );
+}
+
+export default ModeToggle