React Material ui unable to change the itemlist font color for theme

when iam toggling darkmode lightmode its working for the pages but for only drawer listitems when on darkmode the textcolor also being dark i want to change that.

Active showing white only but other elements on that showing black on darkmode please help me with this

This is all the css:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.navlinks{
    color: white;
}
.default-button {
    background-color: transparent;
    color: white;
    text-decoration: none;
  }
.active-button {
    background-color: #3888d8; 
    color: white;
    border-radius: 5px;
    padding:0 10px;
    text-decoration: none;
  }
  .gohome{
    display: inline-block;

    padding: 10px 20px;
    color: #1976d5;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    border: none;
    cursor: pointer;
    border: 0.5px solid #1976d5;
  }

  /* Drawer page */
  .defaultbutton{
    color: black;
    background-color: transparent;
  }
  .activebutton{
    background-color: #3888d8; 
    color: white;
    border-radius: 5px 0 0 5px;
  }  

This is the code iam trying to change the drawer itemlist

import {
  Drawer,
  ListItem,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  IconButton,
  Box,
  useTheme,
} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import React, { useContext, useState } from "react";
import { Link, NavLink } from "react-router";
import { ThemeContext } from "./theme/Theme";

const DrawerComp = () => {
  const [openDrawer, setOpenDrawer] = useState(false);



  const pages = [
    { name: "Home", path: "/" },
    { name: "EXCHANGE RATES (LIVE)", path: "/exchangerate" },
    { name: "About", path: "/about" },
    { name: "Error Page", path: "/errorpg" },
  ];

  const handleClose = () => {
    setOpenDrawer(false);
  };
  return (
    <>
      <Drawer open={openDrawer} onClose={handleClose} >
        <>
          <List>
            {pages.map((page, index) => (
              <ListItem
                disablePadding
                key={index}
                onClick={() => setOpenDrawer(false)}
                sx={{ mb: 2}}
              >
                <NavLink
                  to={page.path}
                  className={({ isActive }) =>
                    isActive ? "activebutton"  :"defaultbutton" 
                  }
                  style={{ marginLeft:"10px",textDecoration: "none", width: "100%", }}
                >
                  <ListItemButton
                  // disableGutters
                    sx={{  width: "100%", borderRadius: "5px 0 0 5px" }}
                  >
                    <ListItemText 
                    primary={page.name}
                    className="drawer-text"

                     />
                  </ListItemButton>
                </NavLink>
              </ListItem>
            ))}
          </List>
        </>
      </Drawer>
      <IconButton
        sx={{ color: "white" }}
        onClick={() => setOpenDrawer(!openDrawer)}
      >
        <MenuIcon />
      </IconButton>
    </>
  );
};

export default DrawerComp;

This is theme context:

import { createTheme, ThemeProvider } from "@mui/material";
import  { createContext, useState } from 'react'

export const ThemeContext = createContext();

export const ThemeContextProvider=({children})=>{
  const [mode, setMode]= useState("light");

  const darkMode=createTheme({
   palette:{
     mode:mode,
   },
  });

  const toggleTheme=()=>setMode((prev)=>prev ==="light" ? "dark": "light")
  return(
    <ThemeContext.Provider value={{mode, toggleTheme}}>
      <ThemeProvider theme={darkMode}>{children}</ThemeProvider>
    </ThemeContext.Provider>
  )
} ;

Here i have switch for navbar to enable or disable:

import {
  AppBar,
  Box,
  Button,
  Container,
  CssBaseline,
  Drawer,
  FormControl,
  Grid,
  InputAdornment,
  InputLabel,
  Link,
  ListItem,
  List,
  ListItemButton,
  ListItemIcon,
  MenuItem,
  Paper,
  Select,
  Switch,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Toolbar,
  Typography,
  ListItemText,
  useTheme,
  useMediaQuery,
} from "@mui/material";
import React, { useContext, useState } from "react";
import TableContent from "./TableContent";
import { ThemeContext } from "./theme/Theme";
import useEMI from "./custome/useEmi";
import { NavLink } from "react-router";
import DrawerComp from "./DrawerComp";

const Navbar = () => {
  const { mode, toggleTheme } = useContext(ThemeContext);
  const theme = useTheme();
  console.log(theme)
  const isMatch=useMediaQuery(theme.breakpoints.down("md"))

  return (
    <>
      {/* --------Navbar------- */}


      <AppBar>
        <Toolbar sx={{ gap: 4 }}>

          {
            isMatch ? (<>
            <DrawerComp/> 
            <Typography variant="h6" sx={{ flexGrow: 1 }}>
            Loan Calculator
          </Typography>
            </>)
            :
            ( <> 
            <Typography variant="h6" sx={{ flexGrow: 1 }}>
            Loan Calculator
          </Typography>
          <NavLink to="/" className={({isActive})=>isActive?"active-button" : "default-button"}>
            <Button color="inherit">Home</Button>
          </NavLink>
          <NavLink to="/exchangerate" className={({isActive})=>isActive?"active-button" : "default-button"}>
            <Button color="inherit">EXCHANGE RATES (LIVE)</Button>
          </NavLink>
          <NavLink to="/about" className={({isActive})=>isActive?"active-button" : "default-button"}>
            <Button color="inherit">ABOUT</Button>
          </NavLink>
          <NavLink to="/errorpg" className="navlinks">
            <Button color="inherit">ERROR PAGE</Button>
          </NavLink>

           </> )
          }
          <CssBaseline />
          <Switch checked={mode === "dark"} onChange={toggleTheme} />

        </Toolbar>



      </AppBar>


    </>
  );
};

export default Navbar;