text color changed

src/components/atoms/Loader.tsx

@@ -1,11 +1,17 @@
 import styled from "styled-components";
 import { Stack } from "@mui/material";
+import { useThemeMode } from "../../context/theme-provider";
+
 
 interface LoaderProps {
   text: string;
 }
 
 export const Loader: React.FC<LoaderProps> = ({ text }) => {
+
+  const { darkMode } = useThemeMode();
+
+  
   return (
     <Stack direction="column" sx={{ margin: "30px 0px", alignItems: "center" }}>
       <DotsContainer>
@@ -14,18 +20,23 @@ export const Loader: React.FC<LoaderProps> = ({ text }) => {
         <Dot />
         <Dot />
       </DotsContainer>
-      <StyledParagraph>{text}</StyledParagraph>
+      <StyledParagraph darkMode={darkMode}>{text}</StyledParagraph>
     </Stack>
   );
 };
 
-const StyledParagraph = styled.p`
+interface StyledParagraphProps {
+  darkMode: boolean;
+}
+
+
+
+const StyledParagraph = styled.p<StyledParagraphProps>`
   font-size: medium;
   font-weight: 700;
   font-family: inherit;
-  color: #333;
+  color: ${({ darkMode }) => (darkMode ? 'white' : 'black')};
   margin-top: 20px;
-  flex:wrap;
 `;
 
 const DotsContainer = styled.div`