fixed background.color

shiloh4 · Aug 22, 2024 · ef5cb6b · ef5cb6b
1 parent 92aab17
commit ef5cb6b
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 1 deletion.
diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  background: '#D2B48C'
 }
 
 .App-logo {
@@ -36,3 +37,7 @@
     transform: rotate(360deg);
   }
 }
+
+body {
+  background: '#D2B48C'
+}
diff --git a/src/App.js b/src/App.js
@@ -11,11 +11,13 @@ function App() {
   const theme = useTheme();
 
   return (
+    <div className="App">
     <ThemeContextProvider theme={lightTheme}>
       <Navbar />
       {/* <Box sx={{ height: '10%' }}/> */}
       <HomePage />
     </ThemeContextProvider>
+    </div>
   );
 }
 

diff --git a/src/Pages/HomePage.js b/src/Pages/HomePage.js
@@ -14,7 +14,7 @@ export default function HomePage() {
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
     return(
-        <Box sx={{display: 'flex', justifyContent: 'center', borderWdith: 1}}>
+        <Box sx={{display: 'flex', justifyContent: 'center' }}>
             <Banner/>
         </Box>
     );

diff --git a/src/themeContextProvider.js b/src/themeContextProvider.js
@@ -13,9 +13,11 @@ export const ThemeContextProvider = ({ children }) => {
 
     const toggleTheme = () => {
         setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+
     };
 
     const theme = useMemo(() => (mode === 'light' ? createTheme(lightTheme) : createTheme(darkTheme)), [mode]);
+     document.body.style.backgroundColor = theme.palette.primary.main;
 
     return (
         <ThemeContext.Provider value={{ mode, toggleTheme }}>