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.
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.