support light mode

Author: hunxjunedo

src/components/Home/ContributorsSection.tsx

@@ -124,7 +124,7 @@ const githubButtonStyles = {
   p: "13px 24px",
   textTransform: "capitalize",
   display: { xs: "none", md: "block" },
-  backgroundColor: "background.muted",
+  backgroundColor: "background.secondary",
   borderRadius: "12px",
 };
 

src/components/Home/FeaturesAndBenefitsSection.tsx

@@ -11,12 +11,12 @@ export const HeadingAndDescription = ({ heading, description }: { heading: strin
     <Container maxWidth={false}>
       <Grid container columnSpacing={20} rowSpacing={5} alignItems="center">
         <Grid item xs={12} md={5}>
-          <Typography variant="h4" fontWeight="bold" color="white">
+          <Typography variant="h4" fontWeight="bold" color="text.primary">
             {heading}
           </Typography>
         </Grid>
         <Grid item xs={12} md={7}>
-          <Typography variant="body1" color="gray">
+          <Typography variant="body1" color="text.muted">
             {description}
           </Typography>
         </Grid>
@@ -29,7 +29,7 @@ const FeatureCard = ({ item }: { item: SecondaryFeature }) => (
   <Grid item xs={12} sm={6} md={3}>
     <Card sx={cardStyles}>
       <Box sx={iconWrapperStyles}>
-        <item.Icon size={20} color="white" />
+        <item.Icon size={20}  />
       </Box>
       <CardContent>
         <Typography variant="h6" fontWeight="bold" gutterBottom>
@@ -67,16 +67,17 @@ export default function FeaturesAndBenefitsSection() {
 const cardStyles = {
   background: "transparent",
   boxShadow: "none",
-  color: "white",
+  color: "text.primary",
   padding: 2,
   flexDirection: "column",
   display: "flex",
   alignItems: "flex-start",
 };
 
 const iconWrapperStyles = {
-  backgroundColor: "background.icon",
+  backgroundColor: "background.muted",
   padding: 2,
+  color: 'text.primary',
   mx: "16px",
   display: "grid",
   borderRadius: 999,

src/components/Home/FeaturesAtGlance.tsx

@@ -22,14 +22,14 @@ const featureStyles = (selected: boolean) => ({
   transition: "background-color 0.3s",
   "&:hover": { backgroundColor: "background.muted" },
   border: "1px solid",
-  borderColor: selected ? "grey.700" : "transparent"
+  borderColor: selected ? "background.secondary" : "transparent"
 });
 
 const actionButtonStyles = {
   ml: "auto",
   textTransform: "none",
   color: "text.primary",
-  backgroundColor: "grey.700",
+  backgroundColor: "background.secondary",
   borderRadius: "8px",
   gap: 1
 };

src/components/Home/SponsorsSection.tsx

@@ -29,11 +29,12 @@ const SponsorCard = () => {
         flexDirection: "column",
         border: "1px solid white",
         borderColor: "background.muted",
+        color: "text.primary",
       }}
     >
-      <PiggyBank size={30} color="white" />
+      <PiggyBank size={30} />
       <div>
-        <Typography variant="h6" fontWeight="bold" color="white">
+        <Typography variant="h6" fontWeight="bold" >
           {title}
         </Typography>
         <Typography variant="body1" color="text.muted">

src/components/NavigationBar/NavigationBar.tsx

@@ -184,7 +184,7 @@ const NavigationBar: React.FC<{
         ) : (
           <Button
             onClick={() => handleLogin()}
-            sx={{ color: "text.primary", textTransform: "capitalize", display: { xs: "none", md: "block" }, backgroundColor: "background.muted", borderRadius: '12px' }}
+            sx={{ color: "text.primary", textTransform: "capitalize", display: { xs: "none", md: "block" }, backgroundColor: "background.secondary", borderRadius: '12px' }}
           >
             {t("navigation_bar.login")}
           </Button>

src/themes/darkTheme.ts

@@ -73,7 +73,8 @@ const darkTheme = createTheme({
 			secondaryBtn: "#374151",
 			secondaryBtnHover: "#425065",
       icon: '#16191D',
-      muted:"#27272A"
+      muted:"#27272A",
+      secondary:"#404040"
 		},
 
 	},

src/themes/lightTheme.ts

@@ -62,13 +62,17 @@ const lightTheme = createTheme({
       primaryBtnHover: '#2F2F2F',
       secondaryBtn: "#1A1A1A",
       secondaryBtnHover: "#374151",
+      muted: "#4A4A55",
     },
     background: {
         paper: "#EDEDED",
+        navbar: '#ffffffb5',
         primaryBtn: "#D6D6D6",
         primaryBtnHover: "#C4C4C4",
         secondaryBtn: "#C2C2C2",
         secondaryBtnHover: "#AFAFAF",
+        muted: "#dfdfdf",
+        secondary:"#c7d0d8",
     },
 	},
 	typography: {