How to change TextField border and text colour when using Material UI Dark mode

24 Views Asked by At

I have incorporated MUI Dark mode into my page. The issue is that TextField and RadioGroup items are now harder to see as their borders and text have remained black.

Form in Dark Mode

I am using the code below to modify the palette for Dark and Light mode but even though I researched and tried many ways to change the border colour and text of these elements I haven't been able to.

const getDesignTokens = (mode: PaletteMode) => ({
palette: {
    mode,
    ...(mode === 'light'
    ? {
        text: {
        primary: '#000',
        secondary: '#000',
        },
    }
    : {
        background: {
        default: grey[800],
        paper: grey[900],
        },
        text: {
        primary: '#fff',
        secondary: '#fff',
        },
      "& .MuiOutlinedInput-root": {
        color: 'white',
        fontFamily: "Arial",
        fontWeight: "bold",
        "& .MuiOutlinedInput-notchedOutline": {
          borderColor: "white",
          borderWidth: "2px",
        },
      },
      "& .MuiInputLabel-outlined": {
        color: "white",
        fontWeight: "bold",
      },
    }),
},
});

const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode]);

I've confirmed the customisation applied with '"& .MuiOutlinedInput-root" and similar classes work when I apply these settings directly to the textfield like below but not when I add them to the dark mode palette.

    <TextField
      id="outlined-password-input-confirm"
      label="Confirm Password"
      type="password"
      required
      value={confirmPassword}
      variant="outlined"
      onChange={(e) => {
        setConfirmPassword(e.target.value);
        setErrorMessage('');
      }}
      sx={{
        "& .MuiOutlinedInput-root": {
          color: 'white',
          fontFamily: "Arial",
          fontWeight: "bold",
          "& .MuiOutlinedInput-notchedOutline": {
            borderColor: "white",
            borderWidth: "2px",
          },
        },
        "& .MuiInputLabel-outlined": {
          color: "white",
          fontWeight: "bold",
        },
      }}

Any help in what I need to add to the dark mode palette above to change the elements to a more readable colour would be appreciated.

0

There are 0 best solutions below